본문 바로가기

Front-End/HTML , CSS

<table>에 대해(HTML)

table은 표를 만든다고 생각하면 쉽다.

 

해당 태그들이다.

 

tr(table row) : 행 (가로)

td (table heading) :  행,열의 제목

caption : 표 제목

thead : 머리글

tfoot : 꼬리말

tbody : 본문

col / colgroup : 스타일을 위한 열(그룹)

 

이렇게 굵은 글씨인 국가는 각각 th ,

요소 하나하나가 td ,

행이 여러개 묶인건 tr이다.

<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>

</head>
<body>
<table border="1">
<caption>
<strong>마라톤 참가선수 명단</strong>
</caption>
<thead>
<tr>
<th>한국</th>
<th>일본</th>
<th>미국</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>세계랭킹 5위</td>
<td>세계랭킹 8위</td>
<td>세계랭킹 2위</td>
</tr>
</thead>
</tfoot>
</table>

 
</body>

</html>

 

'Front-End > HTML , CSS' 카테고리의 다른 글

form , label(HTML)  (0) 2024.01.05
ul , ol ,주석 사용방법(HTML)  (0) 2024.01.05
Image삽입 , a태그(링크)  (0) 2024.01.05
블록레벨 , 인라인 요소  (0) 2024.01.05
시맨틱 태그 모음(HTML)  (0) 2024.01.05