9. 표(table)

<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;
}