HTML.3 행과 열 및 table

HTML

HTML.3 행과 열 및 table

codermun 2020. 11. 4. 17:01

728x90

<table>

table > tr > th, td
table > caption

결론

: Row = 행 ( 가로 ) :

: Col = 열( 세로 ) :

<table> : table - 표

<tr> : table row - 표의 한 열

<th> : table header - 각 열, 행의 머리

속성	역할	값
scope	무엇(행/열)의 머리인지 표시	col, row...

<td> : table data - 표의 각 칸

속성	역할	값
colspan	가로로 n개 칸 병함	칸 개수 숫자값
rowspan	세로로 n개 칸 병함	칸 개수 숫자값
★ 다른 태그들을 포함할 수 있음.

<caption> : 표의 제목

 <!-- 표의 시각화를 위한 CSS 코드 -->

  <style>

    table { border-collapse: collapse; }

    th, td { border: 1px solid black; padding: 8px; }

  </style>



</head>

<body>

    <table>

        <caption>ㅇ식단표</caption>

        <tr>

            <td></td>

            <th scope="col">아침</th>

            <th scope="col">점심</th>

            <th scope="col">저녁</tH>

        </tr>



        <tr>

            <th scope="row">밥</th>

            <td>현미밥</td>

            <td rowspan="2">호박죽</td>

            <td>흰쌀밥</td>

        </tr>

        <tr>

            <th scope="row">국</th>

            <td>콩나물국</td>

            <td>갈비탕</td> 

       </tr>

        <tr>

            <th scope="row">반찬</th>

            <td colspan="3">배추김치</td>

        </tr>

        <tr>

            <td>

            

            </td>

        </tr>

    </table>



</body>