[HTML] 표작성

- 표 작성 = <table> </table>

- 열 = column / 행 = row / 한 칸 = cell

- 줄 시작 = <tr> / 줄 끝 = </tr>

- 하나의 셀 = <td>

---

<table border="2">
    <tr>
        <td>가나다</td>
        <td>라바사</td>
        <td>아자차</td>
    </tr>
</table>

---

표 크기 (픽셀단위)

<table border="1" width="150" height="100">
    <tr>
        <th>이름</th>
        <th>주소</th>
    </tr>
    <tr>
        <th>개나리</th>
        <th>무궁화</th>
    </tr>
</table>

 

- <th> </th> = cell의 글자가 굵은 글자로 표현 (가운데 정렬 포함)

- <td> </td> = cell의 글자가 얇은 글자로 표현

---

표 크기 (%단위)

<table border=5" width="50%">
    <tr>
        <th>사과</th>
        <th>포도</th>
    </tr>
    <tr>
        <th>독사과</th>
        <th>청포도</th>
    </tr>
</table>

 

- <th> </th> = cell의 글자가 굵은 글자로 표현 (가운데 정렬 포함)

- <td> </td> = cell의 글자가 얇은 글자로 표현

---

정렬 : 가로(align), 세로(valign)

<table border="3" width="250" height="200">
    <tr>
        <td align="left">상암동</td>
        <td align="center">청담동</td>
        <td align="right">화양동</td>
    </tr>
    <tr>
        <td valign="top">잠실역</td>
        <td valign="middle">상일역</td>
        <td valign="bottom">청담역</td>
    </tr>
    <tr>
        <td align="left" valign="top">초코</td>
        <td align="center "valign="middle">바닐라</td>
        <td align="right" valign="bottom">딸기</td>
    </tr>
</table>

 

- align = 가로 / valign = 세로

- left = 왼쪽 / center = 가운데 / right = 오른쪽

- top = 위쪽 / middle = 중앙 / bottom = 아래쪽

---

표 안에서 영역 구분 <thead> / <tbody> / <tfoot>

<table border="1">
<thead>
    <tr>
        <th>나라</th>
        <th>도시</th>
        <th>색깔</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>일본</th>
        <th>도쿄</th>
        <th>빨강</th>
    </tr>
    <tr>
        <th>미국</th>
        <th>뉴욕</th>
        <th>파랑</th>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>한국</th>
        <th>서울</th>
        <th>검정</th>
    </tr>
</tfoot>
</table>

 

- <thead> </thead> = 머리말 영역

- <tbody> </tbody> = 본문 영역

- <tfoot> </tfoot> = 꼬리말 영역

---

셀 합치기 = 가로(colspan) / 세로(rowspan)

<table border="1" width="200">
    <tr>
        <td>아반떼</td>
        <td>소나타</td>
        <td>싼타페</td>
    </tr>
    <tr>
        <td colspan="2">말리부</td>
        <td>그랜저</td>
    </tr>
    <tr>
        <td>카니발</td>
        <td rowspan="2">아우디</td>
        <td>테슬라</td>
    </tr>
    <tr>
        <td>캐스퍼</td>
        <td>마티즈</td>
    </tr>
</table>

 

- colspan = " " / 가로 _개 합치기

- rowspan = " " / 세로 _개 합치기

---

표 내부에서 표 작성 가능

<table border="1" width="250" height="300">
    <tr>
        <td>언어</td>
        <td align="center">
            <table border="2">
                <tr>
                    <td>한국어</td>
                    <td>중국어</td>
                </tr>
                <tr>
                    <td>일본어</td>
                    <td>독일어</td>
                </tr>
            </table>
        </td>
    </tr>
</table>