테이블 태그: <table>
테이블의 행(row) 태그: <tr>
테이블의 열(column) 태그: <td>
테이블 헤더 태그: <th>
테이블 열 그룹 태그: <colgroup>
테이블 열 태그: <col span="<column size>">
테이블 설명 추가 -> 테이블 태그 내에 <caption> 포함
테이블 구조를 위한 태그: <thead>, <tbody>, <thead>
해당 헤더가 어떤 셀에 대한 정보인지 명시적으로 전달: scope="col" or scope="row"
Table example
Knocky | Flor | Ella | Juan | |
---|---|---|---|---|
Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
Age | 16 | 9 | 10 | 5 |
Owner | Mother-in-law | Me | Me | Sister-in-law |
Eating Habits | Eats everyone's leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |
<h1>Table example</h1>
<table>
<caption>
Animals we keep
</caption>
<colgroup>
<col />
<col class="mother" />
<col span="2" class="me" />
<col class="sister" />
</colgroup>
<thead>
<tr>
<td> </td>
<th scope="col">Knocky</th>
<th scope="col">Flor</th>
<th scope="col">Ella</th>
<th scope="col">Juan</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Breed</th>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<th scope="row">Age</th>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<th scope="row">Owner</th>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<th scope="row">Eating Habits</th>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
</tbody>
</table>
'HTML' 카테고리의 다른 글
반응형 이미지 (0) | 2022.07.14 |
---|---|
웹에 벡터 이미지 넣기 <svg> (0) | 2022.07.02 |
웹에 객체 임베딩 <iframe>, <object>, <embed> (0) | 2022.07.02 |
HTML에서 비디오를 사용하는 방법 (0) | 2022.06.29 |
HTML에서 이미지를 넣는 방법 (0) | 2022.06.29 |