HTML 표(table) 태그: <table> <tr> <td> <th> <caption> <figcaption> <thead> <tbody> <tfoot>

HTML 표(table) 태그: <table> <tr> <td> <th> <caption> <figcaption><thead> <tbody> <tfoot>

 

<table> <tr> <td> 태그

1. <table> <tr> <td> 태그 - 기본적인 표를 만드는 태그

  - 위 태그로 표를 만들면 표의 테두리선들은 원래 보이지 않습니다. 저는 CSS를 이용해 선이 보이도록 해두었습니다.

  - 위 표는 2행 2열로 구성되어 있습니다.

  - <table> 태그는 표 전체 윤곽을 만들어줍니다.(붉은색)

  - <tr> 태그는 행(row)을 만들어줍니다.(노란색)

  - <td> 태그는 값(data)이 들어갈 영역을 만들어줍니다.(초록색)

---

<th> 태그

2. <th> 태그 - 제목 셀을 만드는 태그

  - th는 table header의 줄임말입니다.

  - <th> 태그를 사용하면 제목 셀을 만들어줍니다.

  - <th> 태그는 제목을 표현하기 위해, 글자를 굵게 표시하고 셀 중앙에 텍스트를 배치합니다.

---

<caption> 태그

3. <caption> 태그 - 표에 제목을 붙여주는 태그1

  - <caption> 태그는 표에 제목을 붙여줍니다.

  - <caption> 태그를 사용한 표의 제목은 표의 위쪽 중앙에 표시됩니다.

  - <caption> 태그는 <table> 태그 바로 다음에 사용합니다.

---

<figcaption> 태그

4. <figcaption> 태그 - 표에 제목을 붙여주는 태그2

  - <figcaption> 태그도 표에 제목을 붙여줍니다.

  - <figcaption> 태그를 사용하기 위해서는 일단, 표 전체를 <figure> 태그로 감싸주어야합니다.

  - 그다음, <figcaption> 태그를 <table> 앞이나 </table> 앞에 사용합니다.

  - <table> 앞에 사용하면 제목이 표 위로 나타나고, </table> 앞에 사용하면 제목이 표 아래로 나타납니다.

---

<thead> <tbody> <tfoot> 태그

5. <thead> <tbody> <tfoot> 태그 - 표의 구조를 정의하는 태그

  - <thead> <tbody> <tfoot> 태그는 표의 구조를 정의해주는 태그입니다.

  - 웹 브라우저 상에 표현될 때 시각적으로 차이를 주지는 않습니다.

  - 그러나 표의 내용을 위 태그로 묶어줌으로서 표의 구조를 나누어주는 것입니다.

  - <thead>는 표의 제목, <tbody>는 표의 본문, <tfoot>은 표의 요약을 나타냅니다.

  - 위 태그로 표의 내용을 묶어주면, 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 알 수 있습니다.

---

6. colspan, rowspan 속성 - 행 또는 열을 합쳐주는 속성

  - colspan은 <td>나 <th> 태그의 속성으로 사용되어, 여러 셀을 가로로 합칩니다.

  - colspan에 사용된 숫자는 합칠 셀의 개수를 나타냅니다.

  - rowspan은 <td>나 <th> 태그의 속성으로 사용되어, 여러 셀을 세로로 합칩니다.

  - rowspan에 사용된 숫자도 합칠 셀의 개수를 나타냅니다.