728x90
table 태그 : 표를 만들 때 사용하는 태그
tr 태그 : 하나의 행을 만들때 사용하는 태그
td,th 태그 : td는 데이터, th는 열 제목을 넣을때 사용하는 태그
thead 태그 : 제목이 들어가는 모든 tr(열)태그들을 묶는 태그
tbody 태그 : 데이터가 들어가는 모든 tr(열)태그들을 묶는 태그
tfoot 태그 : 표의 바닥글 내용을 병합할 때 사용하는 태그
rowspan 태그 : 열의 셀을 병합하는 태그 rowspan="병합하고 싶은 셀의 숫자"
colspan 태그 : 행의 셀을 병합하는 태그 colspan="병합하고 싶은 셀의 숫자"
실습코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 태그 이름으로 스타일을 한번에 주는것 */
table,
th,
td {
border: 1px solid black;
/* border-collapse는 겹치는 테두리를 합치는 것이다. */
border-collapse: collapse;
}
table {
width: 100%;
}
/* 이렇게 따로따로 설정해도 된다. 하지만 위에서 한번에 처리 */
/* th {
border: 1px solid black;
}
td {
border: 1px solid black;
} */
</style>
</head>
<body>
<!-- 표 : table -->
<!-- 행 : tr -->
<!-- 셀 : td(데이터),th(열 제목) -->
<!-- thead = 제목이 들어가는 모든 tr태그들 -->
<!-- tbody = 데이터가 들어가는 모든 tr태그들 -->
<table>
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>asd@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-2464-5456</td>
<td>a23@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-5474-5454</td>
<td>sd2@gmail.com</td>
</tr>
</tbody>
</table>
<br />
<table>
<thead>
<tr>
<th>학년</th>
<th>반</th>
<th>학생 수</th>
</tr>
</thead>
<tbody>
<tr>
<!-- rowspan은 병합 몇개를 병합할건지 숫자 입력 -->
<td rowspan="3">1학년</td>
<td>1반</td>
<td>19명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>2반</td>
<td>15명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>3반</td>
<td>18명</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">합계</td>
<!-- <td></td> -->
<td>52명</td>
</tr>
</tfoot>
</table>
</body>
</html>
구현모습
728x90
'HTML, CSS' 카테고리의 다른 글
| HTML - input태그의 속성(readonly,dsiabled,maxlength,placeholder,required,autocomplete) (0) | 2023.09.25 |
|---|---|
| HTML - autocomplete 표준값 (0) | 2023.09.25 |
| HTML - 목록 태그(ul, li, ol, dl, dt, dd) (0) | 2023.09.24 |
| HTML - form태그와 input 입력 요소 (1) | 2023.09.24 |
| HTML - 블럭요소(block element)와 인라인요소(inline element) (0) | 2023.09.23 |
