반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>표 - table</title>
</head>
<body>
<!--
caption -> 표 안에서 표제목 컨텐츠
tr -> 표 행을 만듬
td -> 행 안의 셀(분류되는 일반 내용 컨텐츠)
th -> 행 안의 셀(분류하는 기준 컨텐츠)
셀 병합 쉽게하는 순서
1. 병합이 시작되는 셀을 찾는다.(html 방향성 좌->우, 위->아래)
2. 가로병합은 colspan, 세로병합은 rowspan
3. 병합이 되어지는 셀은 지운다.
-->
<table border="1" cellspacing="0">
<caption>시간표(표제목)</caption><!--표를 병합할 때 헷갈리니깐 미리 표를 다 만든 뒤에 해라!-->
<tr><!--데이터들의 기준이 되는 셀은 th(table header)태그를 사용-->
<th>비교</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr><!--tr태그는 tablerow, td태그는 tabledata-->
<tr><!--가로 병합은 colspan 속성+병합할 갯수(자신 포함한 갯수), 세로 병합은 rowspan 속성+병합할 갯수(자신 포함한 갯수)/중요한 것은 병합 당하는 셀들은 다시 꼭 지워줘야 함-->
<th>오전</th>
<td rowspan="2">출근</td>
<td>휴무</td>
<td rowspan="2">출근</td>
<td colspan="2">휴무</td>
</tr>
<tr>
<th>오후</th>
<td>출근</td>
<td>출근</td>
<td>휴무</td>
</tr>
</table>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 인라인스타일_기초(2021-08-31) (0) | 2021.11.08 |
|---|---|
| [HTML] 표만들기(Table)_예제_기초(2021-08-27) (0) | 2021.11.08 |
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |
| [HTML] 기본프레임 만들기(2021-08-17) (0) | 2021.11.07 |
| [HTML] a태그/속성(2021-08-19) (0) | 2021.11.07 |