[코딩]표를 작성할 수 있어요! ② - html 표 서식 속성

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.
#width_너비 속성      #height_높이 속성     #align_정렬 속성     #<th>_표제목 태그

 

지난 포스팅에서 표 만들기를 해 보았는데요, 
영 모양새가 이쁘지 않았어요.
이번 포스팅에서는 html에서 가능한 표 편집 기능을 알아보도록 하겠습니다^^

 
 

• width="숫자(픽셀단위)"
  height="숫자(픽셀단위)"
  크기 속성으로, 
  <table> 태그에 쓰면 전체 표 크기 
  <tr> 태그에 쓰면 셀의 너비 
  <td>태그에 쓰면 셀의 높이
• align="right/center" 
  정렬 속성으로,  <table>, <tr>사용 가능!
  메모!)셀의 높이에서는 center 디폴트
  메모!)셀의 너비에서는 left 디폴트
• <th> : 표제목 태그
  <tr> 또는 <td> 대신에 사용하면, 해당셀의 데이터가 굵게&가운데 정렬 표기 됩니다.

 
지난 번에 작성한 시간표 파일을 불러다가, 이 속성들을 넣어 주어 표를 좀더 이쁘게 편집을 해 보도록 하겠습니다. 
 

0) 어떤 모양으로 편집할지 먼저 계획을 세워요

기본 표 태그만 사용하면, 데이터의 글자수에 따라 표의 크기가 정해지고, 정렬은 좌측 정렬이 디폴트입니다. 따라서 다음과 같이 계획을 잡았습니다.

• 표 크기 여유있게 키우기
• 셀 안 데이터 중앙 정렬
• 셀의 각 너비 동일하게 하기
• 표의 제목칸 굵게

1) 먼저, 표 전체 크기를 키워 보겠습니다

<table> 태그 안에 width와 height를 픽셀 기준으로 정의해 줍니다. 
tip!) 픽셀 단위의 크기를 가늠하기 어려운데요, 계산하려하기 보다 일단 그냥 넣고 실행시킨 후 조정하는 게 편했어요^^

 

2) 셀의 데이터들을 중앙정렬 시켜요
 

각 셀들의 데이터를 중앙정렬 시킬 때는 각 행을 담당하는 <tr> 태그에 align 속성을 넣어 줍니다. 특정 셀만 할 때는, 해당 행의 해당 열 <td>에 넣어줄 수도 있는데요, 전체적으로 정렬이 필요할 때는 각행의 <tr> 태그에 넣어주어야 수고를 덜 수 있어요!
 

 메모) 전체 셀을 중앙정렬한다고 <table> 태그에 align 속성을쓰면, 셀의 데이터가 아닌, 표 자체가 문서의 가운데오 정렬이 되어요!

3) 특정 행과 열의 너비의 크기를 조절해요

• 첫행의 높이를 조금 줄여 볼래요! ==> 첫 행<tr>의 높이를 지정
• 2~6열의 너비를 동일하게 할래요! ==>  첫 행<tr>의 2~6열<td>의 너비를 지정

 
 

4) 첫행과 첫 열의 데이터를 제목 칸으로 보고, 굵게 해보도록 하겠습니다. 

제목 칸에 해당하는 곳의 태그를 <td>에서 <th>로 바꿉니다!
메모!) 데이터 앞에 <b> 태그를 사용하면 동일한 효과가 나지만, 웹상에서 제목(중요 키워드)로 인식되지는 않습니다. --> 검색 품질에 영향을 줌

 

5) 이제 저장하고, 파일을 실행해서 확인해요

 

완성된 html 화면

 

쨘!
html 태그를 이용한 표를 완성하였습니다!

 
이밖에도 표에 관련된 html 태그와 속성이 더 많다고 해요. 글 색깔, 배경 색깔 등도 바꿀 수 있어야 하니까요^^ 이것들은 나중에 CSS를 통해서 구현하는게 훨씬 수월하다고 합니다. CSS에서 더 많은 서식을 알아보도록 하고요, html 편에서는 기본 표 태그와 구조에 집중해서 알아두는 걸로 하겠습니다!
 

오늘은 여기까지!
크게 어려운 내용 없었는데, 뭔가 하나 완성할 때마다 뿌듯해 지고 있습니다^^
 
포스팅 읽으시는 분들마다 뿌듯한 하루 되시길 축복해요!
감사합니다!