[HTML5] table 태그, 셀 병합

    <!-- tr= table row / td= table data -->
    <!-- colspan 열 병합 -->
    <section>
      <table width="100%" border="1px solid black;">
        <tr height="40px" align="center">
          <td colspan="4">4칸병합</td>
        </tr>
        <tr height="40px" align="center">
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </table>
    </section>

4칸병합
1	2	3	4

    <!-- rowspan = 행병합 -->
    <section>
      <table width="400" border="1px dash green;">
        <tr height="50" align="left">
          <td rowspan="4" width="50%" >4행병합</td>
          <td>1</td>
        </tr>
        <tr height="50" align="left">
          <td>2</td>
        </tr>
        <tr height="50" align="left">
          <td>3</td>
        </tr>
        <tr height="50" align="left">
          <td>4</td>
        </tr>
      </table>
    </section>

4행병합	1
	2
	3
	4

 

border-radius도 가능하니 참고해보자

참고:

https://www.w3schools.com/html/html_table_borders.asp

HTML Table Borders

 

Image by vectorjuice on Freepik