웹개발/혼자하는 개발 공부

[html] <td>, <tr>, <thead>, <tbody>

데브리 2022. 1. 21. 03:50
반응형

 

오랜만에 유데미 강의를 듣다가 몰랐던 html element들이 나와서 기록. 

 

<tr> : Table Row

<td> : Table Data Cell

<th> : Table Header Cell

<thead> : Table Head

 

 

 

 

 

예 1. <tr>, <th>

html &amp; 결과물

 

 

 

스타일 주는 법

 

 

 

 

 

예 2. <thead>, <tbody>

 

 

 

 

 

예 3. <thead>, <tbody>, <tr>, <th>

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
반응형

 

 

 

 

결과물

 

 

 

 

 

위의 결과물에 스타일을 주면

 

 

 

 

 

 

color, border, font, padding 후 결과물

 

 

 

 

 

 

출처: MDN

반응형