[CSS 강좌] Table 표 만들 때 사용하는 태그
표 만들 때 사용하는 태그
표는 table 태그로 만듭니다.
행은 tr 태그로 만듭니다.
열의 제목이 들어가는 셀은 th로 만듭니다.
내용이 들어가는 셀은 td 태그로 만듭니다.
각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다.
가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다.
세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다.
표 제목은 caption 태그로 만듭니다.
예제
위의 태그를 전부 사용한 간단한 예제입니다. 정렬이나 셀 합침의 결과를 명확히 나타내기 위해 CSS로 표의 폭을 정하고 테두리를 만들었습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<table>
<caption>Lorem</caption>
<thead>
<tr>
<th></th>
<th>Seoul</th>
<th>Seoul</th>
<th>Seoul</th>
</tr>
</thead>
<tbody>
<tr>
<th>Seoul</th>
<td>Pusan</td>
<td>Pusan</td>
<td rowspan="2">Pusan</td>
</tr>
<tr>
<th>Seoul</th>
<td>Pusan</td>
<td>Pusan</td>
</tr>
<tr>
<th>Seoul</th>
<td>Pusan</td>
<td>Pusan</td>
<td>Pusan</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Foot</td>
</tr>
</tfoot>
</table>
</body>
</html>
결과값은 아래와 같음
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌 ] 폰트속성 ( font-family) (0) | 2017.12.13 |
|---|---|
| [CSS 강좌 ] 컨텐트 만들기 ( content ) (0) | 2017.12.12 |
| [CSS 강좌] 링크 꾸미기 (0) | 2017.12.08 |
| [CSS 강좌 ] 목록 꾸미기 ( list-style-type ) (0) | 2017.12.07 |
| [CSS강좌] CSS강좌속성과 상속하지 않는 속성 (0) | 2017.12.05 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.