[HTML/CSS] 표 관련 태그

표 기본구성 태그

<table> : 표 생성 태그
<tr> : 표의 한 행을 나타내는 태그
<th> : 표 내용 입력시 제목셀 태그
<td> : 표 내용 입력시 일반셀 태그

<table>
    <thead>
    <tr>
        <th>브라우저명</th>
        <th>제조사</th>
        <th>홈페이지</th>
    </tr>
</thead>
    <tr>
        <td>Internet Explore</td>
        <td>MS</td>
        <td>http://www.microsoft.com</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>Google</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>Firefox</td>
        <td>Mozilla</td>
        <td>http://www.mozilla.com</td>
    </tr>
</table>

배경색 및 표 테두리는 CSS로 적용

 

표의 행, 열 합치기

colspan="n" : n개의 열을 합친다
rowspan="n" : n개의 행을 합친다

 <table width="400">
    <caption><b>일일 확진자 현황</b><sub>(00.00.00시 기준)</sub></caption>
    <thead id="covid">
        <tr>
        <th width="230" colspan="4">확진환자</th>
        </tr>
    </thead>
    <tbody id="covid">
        <tr>
            <th width="30">누적</th>
            <th colspan="3">발생현황</th>
        </tr>
        <tr>
            <td rowspan="2">14,778,405</td>
            <th id="text_blue" width="50">일일확진</th>
            <th id="text_blue" width="50">위중증</th>
            <th id="text_blue" width="50">신규입원</th>
        </tr>
        <tr id="text_red">
            <td>224,820</td>
            <td>1,116</td>
            <td>1,577</td>
        </tr>
    </tbody>
</table>

글자색상은 CSS로 적용