* 주로 분할 태그인 div 태그를 사용하여 레이아웃을 구성. table 태그는 반응형 웹페이지 반영이 안 됨.
| tag | 설명 |
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row)_(th, thd 태그들을 가로로 묶는 행 그룹) |
| th | 행 내부의 제목 셀 (table heading)_(굵게, 가운데 정렬) |
| td | 행 내부의 일반 셀 (table data) |
| 열의 요약 영역 (컨텐츠 그룹) | 열 그룹 |
| <thead> 표의 머리(제목) 영역 <tbody> 표의 중간(본문) 영역 <tfoot> 표의 꼬리(요약) 영역 |
<colgroup> 서식화를 위해 복수개의 열을 그룹화 <col> colgroup 요소 안의 각각의 열 속성 지정 |
| 속성 | 설명 |
| width: 100% | 표의 가로 길이를 100%로 표현. |
| border-collapse: collapse | <td> 요소들(셀)의 위, 아래, 좌, 우 테두리선 떨어짐 없이 하나의 테두리로 표현. 셀 테두리 간의 여백을 없애줌. |
| border: 1px solid #000(balck) | <td> 요소(셀)에 1px 검은색 테두리 선을 표현. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>표(table)</title>
<style>
table{
width: 100%; border-collapse: collapse;
}
th, td{
border: 1px solid #000;
}
</style>
</head>
<body>
<table> <!--표 정의-->
<tr> <!--1행-->
<th>교과목</th> <!--1행 1열-->
<th>점수</th> <!--1행 2열-->
</tr>
<tr> <!--2행-->
<th>HTML</th> <!--2행 1열-->
<td>93</td> <!--2행 2열-->
</tr>
<tr> <!--3행-->
<th>CSS</th> <!--3행 1열-->
<td>92</td> <!--3행 2열-->
</tr>
<tr> <!--4행-->
<th>평균</th> <!--4행 1열-->
<td>92.5</td> <!--4행 2열-->
</tr>
</table>
</body>
</html>| 교과목 | 점수 |
|---|---|
| HTML | 93 |
| CSS | 92 |
| 평균 | 92.5 |
* <thead>, <tbody>, <tfoot> 영역 추가 + <colgroup>, <col> 그룹열 추가해 마크업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>표(table)</title>
<style>
table{
width: 100%; border-collapse: collapse;
}
th, td{
border: 1px solid #000;
}
.c1{
background-color: #ff0;
}
.c2{
background-color: #0ff;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="c1">
<col class="c2">
</colgroup>
<thead>
<tr>
<th>교과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<th>HTML</th>
<td>93</td>
</tr>
<tr>
<th>CSS</th>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>평균</th>
<td>92.5</td>
</tr>
</tfoot>
</table>
</body>
</html>| 교과목 | 점수 |
|---|---|
| HTML | 93 |
| CSS | 92 |
| 평균 | 92.5 |
| 속성 | 설명 |
| colspan | 열 합치기 (해당 셀이 점유하는 열의 수 지정) |
| rowspan | 행 합치기 (해당 셀이 점유하는 행의 수 지정) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>표(table)_셀합치기</title>
<style>
table{
text-align: center; width: 500px; border-collapse: collapse;
}
td{
border: 1px solid #000; padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td colspan="3">colspan="3" 옆으로 3칸 합치기</td>
<!-- <td>colspan="3" 옆으로 3칸 합치기</td>-->
<!-- <td>colspan="3" 옆으로 3칸 합치기</td>-->
</tr>
<tr>
<td rowspan="3">td rowspan="3" <br>아래로 3칸 합치기</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<!-- <td>td rowspan="3" 아래로 3칸 합치기</td>-->
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<!-- <td>td rowspan="3" 아래로 3칸 합치기</td>-->
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</body>
</html>
| colspan="3" 옆으로 3칸 합치기 | |||
| td rowspan="3" 아래로 3칸 합치기 |
2 | 2 | 2 |
| 3 | 3 | 3 | |
| 4 | 4 | 4 | |
'HTML' 카테고리의 다른 글
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input (0) | 2020.08.01 |
|---|---|
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 1] <form> fieldset/legend, textarea, select (0) | 2020.07.31 |
| HTML5 Tag-List [목록태그] (0) | 2020.07.27 |
| HTML5 Tag-Text [본문태그] (0) | 2020.07.23 |
| HTML5 Tag-Text [글자 형태 태그] (0) | 2020.07.22 |
댓글