[html] 표(테이블) 만들기

html으로 표만드는 방법에 대해 알아보자. table 부분은 쉽지만, 어렵다. 관련 부분을 잘 확인하고 이해해 보자.

 

 

• <tr> : 행 table row
• <td> : 각각의 칸 table data
• <th> : thead와 tbody로 제목줄과 데이터 줄을 분리 시, thead 부분에 들어가게된다.
• colspan : 열을 합친다.(가로로 합치기)
• rowspan : 행을 합친다.(세로 합치기)
• <thead> : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다.
• <tbody> : thead에 대한 data 부분을 나타내 준다.
• <tfoot>
• <caption> : table 제목이 생성된다.
• 셀 병합 속성: colspan, rowspan
• scope 속성
• <col>, <colgroup>

 

<table border="1" width="500">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>

• border는 테두리를 의미하고 width는 너비를 의미한다. 결과값은 아래와 같다.

 

 

<table border="1" width="500">
        <tr>
            <td colspan="2">1, 2</td>
            <td>3</td>
            <td rowspan="3">4, 8, 12</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
    </table>

• colspan, rowspan 으로 각각의 테이블을 합해 준다. 합할 숫자를 적어주고, 기존에 합쳐질 칸들은 지워주면 된다.

 

 

 

 

 

개발 시 가장 많이 만드는 것이 게시판이다. table에서 tr를 제목인지, 데이터 줄인지 thead와 tbody에 넣어준다. 나누어 주자. 

<table border="1" width="600">
        <caption>우리들의 게시판</caption>
        <thead>
            <tr>
                <th>id</th>
                <th>제목</th>
                <th>작성자</th>
                <th>날짜</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1번게시물</td>
                <td>king</td>
                <td>2022-01-13</td>
            </tr>
            <tr>
                <td>2</td>
                <td>게시물 투</td>
                <td>hanpy</td>
                <td>2022-01-15</td>
            </tr>
        </tbody>
    </table>

• <thead> : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다.
• <tbody> : thead에 대한 data 부분을 나타내 준다.
• <caption> : table 제목이 생성된다.

 

 

 

css 참고

https://www.codingfactory.net/10510