[HTML] 표를 만드는 태그

 

 

<table> : 표 하면 떠오르는 형태의 기본적인 표를 만들어주는 태그입니다. <table>태그 하나만으로 표가 만들어지는 것은 아니고 열과 행을 만들어주는 태그들과 함께 사용함으로써 표가 완성됩니다.

 

<tr> : 표에서 행을 만들어줍니다.

<td> : 표에서 셀을 만들어줍니다. 셀이란 표에서 한 칸의 공간을 셀이라고 하며, 이 셀의 갯수에 따라 표의 열이 정해진다고 생각하시면 됩니다.

<th> : 표에서 제목 셀을 만들어줍니다. 제목은 다른 태그칸의 글씨보다 굵게나오며 가운데 정렬이 되어나옵니다.

<table> <tr> <td> <th>

 

표가 만들어졌습니다. 하니만 표에 테두리가 없으니 표인지 글자의 나열인지 구분하기 어렵습니다. 그럴때는 table태그의 속성에 border = "테두리값"을 추가해주시면 됩니다.

border속성 추가

 

테두리가 있는 표가 필요할땐 border속성을 넣고, 표 형태의 배치만이 필요한 경우에는 속성없이 사용하면 되겠습니다.

 

 

여기는 단 한 칸
	여기도 단 한 칸

기본적인 표 이외에도 위와같은 모양의 표도 속성을 통해 만들수 있습니다. colspan속성을 열을 합쳐주고, rowspan속성은 행을 합쳐줍니다.

셀 합치기

 

이렇게 필요한대로 입맛에 맞는 표를 얼마든지 생성할 수 있습니다.

 

---

제목1	제목2	제목3
내용1	내용2	내용3
결과

표를 만들다보면 맨위에 표의 제목, 중간에 표의 내용, 마지막에 표의 결과(합계, 요약등)을 가진 표를 만드는 경우가 있습니다. 위에서 알게된 colspan과 rowspan속성을 사용해도 되지만 표가 커지면 구조가 난해해지거나 관리가 어려워지는 경우가 발생합니다. 

 

그런 경우에는 <thead>, <tbody>, <tfoot>태그를 사용하는데 이를 사용하면 각 부분에 속성을 따로 정리할 수 있고, 각 부분마다 다른 기능을 넣을 수 있습니다. 또한 화면낭독기에서도 표의 구조를 이해하기 쉽게 해주기 때문에 여러므로 편리한 구조를 갖는 태그들입니다. 마찬가지로 <table>태그안에 태그들을 넣습니다.

 

<thead> : 표의 제목부분을 갖는 태그입니다.

<tbody> : 표의 내용(본문)부분을 갖는 태그입니다.

<tfoot> : 표의 결과(요약)부분을 갖는 태그입니다.

<thead> <tbody> <tfoot>

• align : 글자 위치 정렬속성

 

---

여태까지 표를 계속 만들었는데 뭔가 아쉽습니다. 그건 바로 표의 제목이 빠졌기 때문입니다. 표의 제목까지 깔끔하게 넣을 수 있는 태그도 또한 존재하기 때문에 텍스트태그를 통해 힘들이실 필요가 없습니다.

 

<caption> : 표에 제목을 붙여줍니다. 자동적으로 표의 위쪽 중앙에 표시되며, 태그안에 다른 텍스트 태그들을 이용해 제목에 다양한 효과를 부여할 수 있습니다.

<caption>

 

<figcaption> : 표에 이름을 붙이는 또 다른 방법인데요. 먼저 <table></table>태그를 <figure>태그로 감싼 후에 <figcaption>태그를 넣고 사용합니다. <caption>과는 다르게 중앙정렬되지 않으며 <figcaption>의 위치에 따라서 제목이 표시되는 위치가 달라집니다.

 

 이 방법은 표에 이름을 붙이는 것뿐만이 아니라 나중에 알게될 이미지태그에서도 이미지 설명관련으로 붙입니다. 미리 간단하게 설명하자면 <figcaption>태그는 <figure>태그로 제목/설명을 붙이고 싶은 항목을 감싸고 거기에 대해 제목/설명을 붙이는 것입니다.

<figure> <figcaption>

---

보다보니 한 행에 스타일을 적용시키는건 간단해보이는데, 한 열전체나 한 열에서 몇 개에만 스타일을 적용하는건 복잡해 보입니다. 그런 걱정을 덜기 위한 태그 또한 존재합니다.

 

<col> : 한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용합니다. 닫는 태그가 없습니다. 둘 이상의 열의 스타일 편집도 가능합니디.

 

<colgroup> : 여러 열을 묶을 때 사용합니다. 묶을 열의 갯수만큼 <colgroup>태그안에 <col>태그를 넣습니다.

<col> <colgroup>

• 첫 <col>태그에서 1열과 2열을 묶었고 두번째 <col>은 그다음 3열을 지정했습니다.
• 1분단과 2분단 셀에 하늘색, 3분단에 보라색 배경색 속성이 들어가지 않은 이유는 <thead>태그에 나중에 배경색 속성이 중첩이 일어났기 때문입니다. html에서 태그나 속성의 중첩이 일어나면 가장 가까운 태그나 속성의 값을 따라갑니다.

---

※테이블도 또한 중첩이 가능합니다.

<table>태그의 중첩