반응형
<table> 태그 관련 속성
- border - 속성을 사용하여 <table>, <th>, <td> 태그에 테두리를 그립니다.
- border-collapse: collapse; - 속성을 사용하여 중복된 테두리를 하나로 합칩니다.
- background-color - 속성을 사용하여 배경색을 지정합니다.
실습
<!-- HTML -->
<table>
<caption>테이블</caption>
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th rowspan="2">이름</th>
<th colspan="3">과목</th>
</tr>
<tr>
<th>국어</th>
<th>수학</th>
<th>영어</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>70</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>김길동</td>
<td>90</td>
<td>60</td>
<td>70</td>
</tr>
</tbody>
</table>
/* CSS */
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 20px;
}
th {
background-color: gray;
color: white;
}
td:hover {
background-color: pink;
}
반응형
'CSS' 카테고리의 다른 글
11. Flexbox (0) | 2024.04.29 |
---|---|
10. Transform, Transition (0) | 2024.04.25 |
8. Position (0) | 2024.04.23 |
7. Float (0) | 2024.04.19 |
6. Display (0) | 2024.04.18 |