요즘은 <div>를 많이 쓰지만 종종 table을 사용하는 곳들도 있다.
테이블 만들기
<table> : 테이블 만드는 태그
<th> : 테이블 헤더 만드는 태그
<tr> : 테이블 행을 만드는 태그
<td> : 테이블 열을 만드는 태그
테이블 디자인 변경
border : 테두리
bordercolor : 테이블 테두리 색상 - default 검정색
width : 가로 크기
height : 세로 크기
align : 정렬
bgcolor : 배경색
colspan : 가로 합병 (열 합병)
rowspan : 세로 합병 (행 합병)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<table border="1">
<tr>
<th>영화제목</th>
<th>연도</th>
<th>감독</th>
<th>평가</th>
</tr>
<tr>
<td>라이프오브파이</td>
<td>2013</td>
<td>이안</td>
<td>8.68</td>
</tr>
<tr>
<td>레미제라블</td>
<td>2012</td>
<td>톰후퍼</td>
<td>8.28</td>
</tr>
<tr>
<td>장고 : 분노의 추적자</td>
<td>2012</td>
<td>타란티노</td>
<td>8.29</td>
</tr>
</table>
</body>
</html>
<td colspan="3"></td>
<td rowspan="3"></td>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
table
{
width : 250px;
height : 100px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>1열</th>
<th>2열</th>
<th>3열</th>
</tr>
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td colspan="3">3행 1열</td>
</tr>
</table>
</body>
</html>
'개발일지 > Front' 카테고리의 다른 글
| input, list 예제(복습) (1) | 2021.11.03 |
|---|---|
| 1101(3) html - input, select 복습 (0) | 2021.11.02 |
| 1101(1) html - 이클립스에서 환경설정 및 문자표현 태그 (2) | 2021.11.01 |
| html 복습 (0) | 2021.10.12 |
| [html] body에서 style 불러와서 사용하기 (0) | 2021.09.09 |
