[HTML] table 태그

table 태그

: 표 생성에 사용

 

요소

• tr : 행
• th / td : 열 (한칸)
  • th : 제목, 합계 ( 가운데 정렬, 굵은 글씨 )
  • td : 일반 ( 왼쪽 정렬, 보통 글씨 )
• thead / tbody / tfoot
  • 사용하지 않는 경우 tbody 자동생성
  • 순서는 thead > tbody > tfoot
  • 순서가 달라져도 무조건 thead는 상단에 표시 된다

 

설정

: 보통 css에서 설정 가능

• border : 테두리 두께 설정
• bordercolor : 테두리 색상
• width : 가로길이

 

셀 병합

colspan : 열 병합 (가로)

rowspan : 행 병합 (세로)

단, 병합을 하려면 병합될 칸을 삭제하기!

 

생성 예시

3x4 : 3행 4열 : tr * 3 / td * 4

tr*3 > td*4로 한번에 생성 가능

 

사용

<table border="1" width="50%">
        <!-- %표시는 반응형 (화면에 맞게 크기 조절) -->
        <tr>
            <th colspan="2">1</th>
            <th>3</th>
            <th>4</th>
        </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>

 

<table border="1" width="50%" bordercolor="blue">
        <thead>
            <tr >
                <th>과목</th>
                <th>이름</th>
                <th>성적</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>국어</td>
                <td>홍길동</td>
                <td>90</td>
            </tr>
            <tr>
                <td>국어</td>
                <td>이순신</td>
                <td>85</td>
            </tr>
            <tr>
                <td>국어</td>
                <td>홍길순</td>
                <td>70</td>
            </tr>
        </tbody>    
        <tfoot>    
            <tr>
                <th colspan="2">합계</th>
                <th>70</th>
            </tr>
        </tfoot>    
    </table>