테이블(표)의 칸 합치기
row는 줄을 뜻해서 세로 줄을 뜻하고, col은 열을 뜻해서 가로.
colspan과 rowspan속성
표를 만든 후 표의 행이나 열을 합칠 경우 colspan과 rowspan을 사용할 수 있다.
이 속성은 셀(칸)을 합치는 속성으로 칸을 만드는 th태그나 td태그에 적용할 수 있다.
[기본형]
1. 표의 가로 칸을 합칠 경우
<td colspan='숫자'></td>
<th colspan='숫자'></th>
2. 표의 세로 칸을 합칠 경우
<td rowspan='숫자'></td>
<th rowspan='숫자'></th>
<table>
<figcaption>수업시간표 가을학기</figcaption>
<tr>
<th>시간</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
</tr>
<tr>
<th>7:30</th>
<td colspan="4"><p>아침식사</p></td>
</tr>
<tr>
<th>8:00</th>
<td rowspan="2">경역학:강의 B관, 256호</td>
<td rowspan="3">물리학:강의 J관, 309호</td>
<td rowspan="2">경역학: 강의 B관, 256호</td>
<td rowspan="3">물리학:강의 J관, 309호</td>
</tr>
<tr>
<th>8:30</th>
</tr>
<tr>
<th>9:00</th>
<td rowspan="2">응용수학 H관,101호</td>
<td rowspan="2">응용수학 H관,100호</td>
</tr>
<tr>
<th>9:30</th>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
<title>표의 칸 합치기</title>
<style>
table {
border: 3px solid chocolate;
margin-bottom: 20px;
}
th,
td {
border: 2px solid green;
}
.container {
display: flex;
justify-content: space-evenly;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<!-- 2행 2열 표 -->
<table>
<caption>
colspan
</caption>
<tr>
<!-- 해당 칸부터 가로로 2칸을 합침. -->
<td colspan="2">1행1열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<table>
<caption>
rowspan
</caption>
<!-- 해당 칸부터 세로로 2칸을 합침. colspan, rowspan 모두 합치고 싶은 시작 칸에 써줘야한다. -->
<tr>
<td rowspan="2">1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<!-- 2행1열을 지워야한다. 첫번째 칸을 합쳤으므로 -->
<td>2행2열</td>
</tr>
</table>
<table>
<caption>
rowspan+colspan
<tr>
<td rowspan="3">1</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td colspan="2">555</td>
</tr>
<tr>
<td>888</td>
<td>999</td>
</tr>
</table>
표의구조
시각장애인을 위한 태그
화면낭독기라는 프로그램을 통해서 소리로 듣는다.
표의 구조를 나누는 태그로.
표의 제목부분 <thead>
본문부분 <tbody>
요약부분 <tfoot>
*thead와 tbody가 tr,td를 대신하지 않는다. thead, tbody 아래 tr, td 써줘야한다.
웹페이지의 게시판 등을 작업할 때 표의 구조를 정의하면 시각 장애인들도 화면낭독기를 통해 표의 구조를 쉽게 이해할 수 있다.
화면에 표현해주지는 않지만 기기를 통해 표를 제대로 구분할 수 있다.
또한 css를 통해 표 영역에 각기 다른 스타일을 지정하여 표를 꾸밀 수 있다.
<title>표의 구조</title>
<style>
table,
tr,
th,
td {
border: 2px solid green;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>요약부분(생략가능)</td>
</tr>
</tfoot>
</table>
</body>
<title>표의 구조</title>
<style>
table,
tr,
th,
td {
border: 2px solid green;
}
</style>
</head>
<body>
<table>
<caption>
공지사항
</caption>
<!-- 표의 제목부분 -->
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>날짜</th>
</tr>
</thead>
<!-- 표의 본문부분 -->
<tbody>
<tr>
<td>001</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-24</td>
</tr>
<tr>
<td>002</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-25</td>
</tr>
<tr>
<td>003</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-26</td>
</tr>
</tbody>
<!-- 표의 요약부분 -->
<tfoot>
<tr>
<td>025</td>
<td>총25개의 게시물</td>
<td>최종날짜 05-21</td>
</tr>
</tfoot>
</table>
</body>
</html>
<col>,<colgroup>태그
세로 줄에 있는 모든 칸에 같은 스타일을 적용하고 싶을 때 사용한다.
<col>태그는 닫힌 태그가 없는 단독태그로 세로로 1줄을 의미하고,
만약 2줄 이상에 동일한 스타일을 적용하고 싶다면 span속성을 이용하여 두 줄을 하나로 묶을 수 있다.
<colgroup>태그는 여러 세로 줄을 묶어주는 <col>의 부모태그로
col태그를 사용하려면 반드시 colgroup태그로 묶어주어야한다.
*col의 갯수는 반드시 th또는 td의 갯수와 동일해야한다.
[기본형] 위치: caption태그의 아래, thead나 tbody 위에 써있어야 한다!
<table>
<caption>
공지사항
</caption>
<!-- 세로줄 공통 스타일 지정. colgroup태그는 caption의 아래에 위치해야한다. -->
<colgroup>
<!-- inline style을 바로 주어도 되지만 우선순위가 높아 수정하기 힘들다. width써줄때
단위 없이 숫자로만 써준다. width="숫자"-->
<col width="50" />
<col span="2" width="150" />
<col width="100" />
</colgroup>
<!-- 표의 제목부분 -->
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>날짜</th>
...
표 꾸미기 속성
1~4. 해당 속성은 table태그(부모)에 적용해야 한다.
1. border-collapse 속성★
표에 테두리를 적용하면 table태그와 td, th태그에 줄이 각각 생기며 분리되어 있는 것이 기본값이다.
만약 표의 테두리를 하나로 합치고 싶다면 border-collapse속성을 이용할 수 있다.
[속성값]
collapse; 테두리를 하나로 합쳐 표현한다.
separate; 기본값으로 테두리를 분리해서 표현한다.
2. border-spacing 속성
table태그에 border속성을 사용했을 때 기본값인 테두리와 칸들의 테두리 간격을 설정하는 속성이다.
border-collapse가 collapse인 경우 쓸 수 없다. 서로 떨어져 있어야 간격을 설정할 수 있기 때문이다.
[속성값]
숫자px, %;
3. empty-cells 속성
표에 빈칸이 있을 경우 테두리를 보여줄지 안 보여줄지 지정하는 속성
border-collaps: collapse;상태일 때에는 사용할 수 없다.
[속성값]
show; 빈칸의 테두리를 보여준다. 기본값
hide; 빈칸의 테두리를 보여주지 않는다.
4. table-layout 속성
width,height를 이용하면 칸에 원하는 사이즈를 지정할 수 있다.
하지만 영문일 경우 여백 없이 길게 입력하면 셀의 width값은 무시되고 영문 내용은 한 줄로 표시된다. 그러면서
옆칸을 침범하게 된다. 이런 경우 table-layout속성을 이용할 수 있다.
table-layout속성을 사용하면 지정한 크기를 유지하며 내용은 옆칸을 침범하게 된다.
옆칸을 침범한 내용을 아랫줄로 내리고 싶다면 word-break속성으로 아랫줄로 내릴 수 있다.
[속성값]
fix : 칸의 넓이를 고정하며 셀의 내용에 따라 넓이가 달라지지 않는다.auto : 기본값이며 셀의 내용에 따라 넓이가 달라진다.
5. vertical-align
칸 안에서 글자를 세로정렬하고 싶을 때 사용하는 속성.
이 속성은 표에서만 사용할 수 있고, 적용하고자 하는 해당 칸에 직접 적용한다.
*이미지태그에도 쓸 수 있다.
[속성값]
baseline;
top;
middle;
기본값, 셀의 중앙에 글자를 맞춤
bottom;
패딩 영역을 제외한
<title>세로줄을 묶어주는 태그</title>
<style>
table,
th,
td {
border: 2px solid darkblue;
}
colgroup > col:nth-child(1) {
background-color: pink;
}
</style>
</head>
<body>
<!--
<col>,<colgroup>태그
==============================
세로 줄에 있는 모든 칸에 같은 스타일을 적용하고 싶을때 사용한다.
<col>태그는 닫힌 태그가 없는 단독태그로 세로로 1줄을 의미하고,
만약 2줄 이상에 동일한 스타일을 적용하고 싶다면 span속성을 이용하여
두 줄을 하나로 묶을 수 있다.
<colgroup>태그는 여러 세로 줄을 묶어주는 <col>의 부모태그로
col태그를 사용하려면 반드시 colgroup태그로 묶어주어야 한다.
*col의 갯수는 반드시 th또는 td의 갯수와 동일해야 한다.
[기본형]
<table>
<colgroup>
<col span="2" /> => 세로줄 두 줄을 span으로 묶음
<col /> => 세로줄 1줄
</colgroup>
<thead></thead>
<tbody></tbody>
</table>
-->
<table>
<caption>
공지사항
</caption>
<!-- 세로줄에 공통스타일 지정 -->
<colgroup>
<col span="2" width="200" />
<col width="100" />
</colgroup>
<!-- 표의 제목부분 -->
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>날짜</th>
</tr>
</thead>
<!-- 표의 본문부분 -->
<tbody>
<tr>
<td>001</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-14</td>
</tr>
<tr>
<td>002</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-14</td>
</tr>
<tr>
<td>003</td>
<td>기업설명회(IR)개최</td>
<td>2025-04-14</td>
</tr>
</tbody>
<!-- 표의 요약부분 -->
<tfoot>
<tr>
<td>025</td>
<td>총 25개의 게시물</td>
<td>-</td>
</tr>
</tfoot>
</table>
</body>
