웹문서에서 표 만드는 요소는 Table
● <table>은 블록요소로 기본적으로 행과 열을 가진다.
- 행을 만드는 요소 - <tr>
- 열을 만드는 요소 - <td> td는 셀(cell)이라고도 함.
- <table>요소 안에 있는 border는 표에 경계선을 주는 속성.
● 기본적인 테이블 구조
<table>
<tr>
<td>내용</td>
</tr>
</table>
● 실습하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블</title>
</head>
<body>
<h1>표만들기</h1>
<h2>1행1열 표 만들기</h2>
<table border="1">
<tr>
<td>1행 1열</td>
</tr>
</table>
<h2>1행2열 표 만들기</h2>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
</table>
<h2>2행1열 표 만들기</h2>
<table border="1">
<tr>
<td>1행 1열</td>
</tr>
</table>
<h2>2행2열 표 만들기</h2>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<위의 예제의 실제>
● <table> 요소 안에 <tr> 요소가 1개 있으면 1행이 만들어지고 <tr> 요소가 2개 있으면 2행이 만들어진다. <td> 요소 또한 1개 있으면 1열이, 2개 있으면 2열이 만들어집니다.
● 셀합치기 기능
<td colspan="열 합치기 개수"></td>
<td rowspan="행 합치기 새수"></td>
'코딩배우기' 카테고리의 다른 글
| CSS3, box-shadow 예제 (0) | 2018.05.09 |
|---|---|
| float 속성 연습 (0) | 2018.05.06 |
| stroke dashed line 응용하기 (0) | 2018.05.04 |
| CSS 테두리 속성 (0) | 2018.05.03 |
| border-style 속성(테두리) (0) | 2018.05.02 |
