| →column(열) | |||
| ↓row(행) | |||
- <td> = 데이터 셀 (table-column)
- <th> = 제목 셀을 나타내는 태그
- <tr> = 행을 나타내는 태그(table-row)
- <table> = 표
- <caption> = 표의 제목을 나타내는 태그
- <thead> = 제목 행을 그룹화 하는 태그
- <tfoot> = 바닥 행을 그룹화 하는 태그
- <tbody> = 본문행을 그룹화 하는 태그
- rowspan = 행(세로) 병합
- colspan = 열(가로) 병합
* HTML5 : <tfoot>의 위치가 <tbody> 앞에 와도 되고, 뒤에 와도 상관 없음
<!DOCTYPE HTML>
<html lang = "ko">
<head>
<meta charset = "utf=-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>테이블</title>
<style>
th, td{border : 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>values</caption>
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th colspan="2">3</th>
<th rowspan="2">4</th>
</tr>
<tr>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
결과값
'WEB > html & css' 카테고리의 다른 글
| 폼 관련 요소(FORM)2 (0) | 2022.07.07 |
|---|---|
| 폼 관련 요소(FORM) (0) | 2022.07.07 |
| 이미지 (IMAGE) 태그 (0) | 2022.07.06 |
| 리스트 (ul, ol, dl) (0) | 2022.07.06 |
| CONTAINER (div, span) (0) | 2022.07.06 |
댓글