[HTML/CSS] 표 만들기 <table>태그!!(1)
[HTML/CSS] 표 만들기 <table>태그!!(1)
|
일반적으로 문서 작성을 할때 표를 많이 만들어 보셨죠? 웹 문서에서도 표를 만들수 있는데 이때 사용되는 <table>태그는 단순히 표로써의 역할만 하는것이 아니라 문서 구성을 위한 레이아웃을 잡을때도 사용해요. 저 같은경우엔 거의 모든 포스팅에 포함 되어 있을정도로 많이 사용하는 태그에요. |
표의 구성
|
중학교 수학시간에 행열에 대해 배우셨죠? 표는 데이터가 들어가는 셀들이 모여 행과 열을 이루고, 행과 열들이 모여 하나의 표가 완성됩니다. |
|
|
|
|
|
태그 |
비고 |
|
table |
테이블을 선언하는 태그 |
|
caption |
테이블에 표기하는 캡션 |
|
tr |
한 행을 구성하는 태그 |
|
th |
제목셀이며 일반 셀과 다르게 강조되어 나타남 |
|
td |
일반 셀이며 내용을 구성함 |
|
일반적으로 이렇게 <tr>속에 <th>혹은 <td>를 넣어 구성을 합니다. 그런데 표에 테두리가 없죠? 위에서도 설명했지만 <table>태그는 표 뿐만 아니라 레이아웃을 구성할 때도 사용하기 때문에 이럴때는 테두리가 없어야 하기때문에 기본적으로 테두리가 존재하지 않아요. 그렇기 때문에 "border"속성을 추가해서 테두리를 잡아줘야 합니다. |
|
<caption>태그는 <table>태그 안에 위치하면 되며, "border"속성을 추가해서 테두리를 나타냈어요. 또한 셀의 내용이 비워져야 할때가 있는데 이럴때 <td></td> 이렇게 내용이 없으면 셀의 테두리가 나타나지 않기때문에 공백( )을 넣어줘야 합니다. |
|
이렇게 간단히 표의 구성에 대해 알아봤어요. 테이블은 다뤄야 할 분량이 많다보니 다음 포스팅에서는 <table>태그의 각종 속성에 대해 다뤄보도록 할게요. |
< 연습하기 >
