HTML & CSS

[42-2 HTML] rowspan, colspan, cellspacing

Olivia-BlackCherry 2022. 10. 9. 00:12

span은 확장하다는 의미이다.

rowspan

rowspan은 행(row)을 확장하는 것으로, 시각적으로 세로 방향으로 셀을 합친다.

rowspan="3" table data1
table data2
table data3

<코드>

<body>
  <table>
    <tr>
      <th rowspan="3">소재</th>
      <td> 블록코딩</td>
    <tr>
      <td> 텍스트코딩</td>
    </tr>
    <tr>
      <td> 프로그램 개발</td>
    </tr>
    </tr>
  </table>

 

<실제 화면>

 

 

 

colspan

colspan은 열(column)을 확장하는 것으로, 시각적으로 가로 방향으로 셀을 합친다.

colspan="2"
th th
td td
td td

<코드>

  <table>
    <thead>
      <tr>
        <th colspan="2">우리반</th>
      </tr>
      <tr>
        <th>남학생</th>
        <th>여학생</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>예(50%)</td>
        <td>아니오(50%)</td>
      </tr>
      <tr>
        <td>예(40%)</td>
        <td>아니오(60%)</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
          <td colspan="2">합계(100%)</td>
      </tr>
    </tfoot>
  </table>

<실제화면>

 

cellspacing

셀 앞에 여백 공간을 둔다.

<코드>

  <table cellspacing="20">
    <thead>
      <tr>
        <th colspan="2">우리반</th>
      </tr>
      <tr>
        <th>남학생</th>
        <th>여학생</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>예(50%)</td>
        <td>아니오(50%)</td>
      </tr>
      <tr>
        <td>예(40%)</td>
        <td>아니오(60%)</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">합계(100%)</td>
      </tr>
    </tfoot>
  </table>

<실제 화면>