Table

HTML 태그

tag	의미 및 관련 속성
table	표 표시 border: 표 테두리선 표시
tr	표의 한 행 표시 rowspan: 같은 열의 셀들을 합침. colspan: 같은 행의 셀들을 합침.
th	제목 셀 표시
td	내용 셀 표시

• Ex1

table 예제

<table border="1">
    <tr>
        <td>시간</td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
    </tr>
    <tr>
        <td>1교시</td>
        <td>국어</td>
        <td>수학</td>
        <td>영어</td>
        <td>과학</td>
        <td>체육</td>
    </tr>
    <tr>
        <td>2교시</td>
        <td>역사</td>
        <td>미술</td>
        <td>사회</td>
        <td>영어</td>
        <td>체육</td>
    </tr>
    <tr>
        <td>3교시</td>
        <td>영어</td>
        <td>국어</td>
        <td>수학</td>
        <td>수학</td>
        <td>체육</td>
    </tr>
    <tr>
        <td>4교시</td>
        <td>수학</td>
        <td>영어</td>
        <td>국어</td>
        <td>국어</td>
        <td>체육</td>
    </tr>
</table>

시맨틱 태그

tag	의미
caption	제목 표시
thead	표의 시작 셀 부분
tbody	내용 셀 부분
tfoot	표의 마지막 부분(요약 셀들)

• Ex2

table 예제

<table border="1">
    <caption>학생 종합 성적표</caption>
    <thead>
        <tr>
            <th>구분</th>
            <th>학생1</th>
            <th>학생2</th>
            <th>학생3</th>
            <th>학생4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>중간</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>100</td>
        </tr>
        <tr>
            <td>기말</td>
            <td>50</td>
            <td>100</td>
            <td>80</td>
            <td>100</td>
        </tr>
        <tr>
            <td>수행</td>
            <td>90</td>
            <td>90</td>
            <td>60</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>
            <td>220</td>
            <td>250</td>
            <td>230</td>
            <td>300</td>
        </tr>
        <tr>
            <td>평균</td>
            <td>73</td>
            <td>83</td>
            <td>76</td>
            <td>100</td>
        </tr>
    </tfoot>
</table>

행, 열 셀 합치기

table 예제

<table border="1">
    <tr>
        <td>시간</td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
    </tr>
    <tr>
        <td>1교시</td>
        <td></td>
        <td rowspan="2">JAVA</td>
        <td></td>
        <td colspan="2">영어</td>
    </tr>
    <tr>
        <td>2교시</td>
        <td rowspan="3">웹 프로그래밍</td>
        <td rowspan="2">MySQL</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>3교시</td>
        <td></td>
        <td colspan="2" rowspan="2">자습</td>
    </tr>
    <tr>
        <td>4교시</td>
        <td></td>
        <td></td>
    </tr>
</table>