728x90
반응형
기본테이블 만들기
<body>
<h1>1. 기본 테이블 만들기</h1>
<table id="t1" border="1" style="width: 300px;">
<tr style="background-color: gray;">
<th>컬럼01</th>
<th>컬럼02</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
주요 태그 사용해서 만들기
<body>
<h1>2. 주요 태그 사용해서 만들기</h1>
<table border="1">
<caption>테이블 제목</caption>
<colgroup>
<col width="100px" />
<col width="200px" />
<col width="300px" />
</colgroup>
<thead>
<tr>
<th style="background-color: gray;">컬럼1</th>
<th style="background-color: yellow;">컬럼2</th>
<th style="background-color: orange;">컬럼3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</td>
</tbody>
</table>
</body>
테이블 셀 병합하기
<body>
<h1>3. 테이블 셀 병합하기</h1>
<table border="1">
<caption>테이블 병합</caption>
<thread>
<tr>
<th>컬럼1</th><th>컬럼2</th><th>컬럼3</th><th>컬럼4</th>
</tr>
</thread>
<tbody>
<tr>
<td rowspan="2">1(세로 -열- 합치기)</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7(가로 -행- 합치기)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">9</td>
</tr>
</tfoot>
</table>
</body>728x90
반응형
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML]Form (0) | 2020.08.03 |
|---|---|
| [HTML]list (0) | 2020.08.03 |
| [HTML]a_링크 (0) | 2020.08.03 |
| [CSS]basic (0) | 2020.07.21 |
| [HTML]구분선, 인용문 (0) | 2020.07.21 |
