본문 바로가기
CSS

9. 표(table)

by 몽이코딩 2024. 4. 24.
반응형

<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