관리 메뉴
오봉이와 함께하는 개발 블로그
테이블 태그 본문
728x90
FrontEnd_day1 정리 (2021.12.02 목요일)
테이블 태그
- <table> : 테이블 선언 태그
- <tr> : 테이블 내에 한 행을 정의하는 태그
- <td> : 테이블 내의 한 열, 즉 셀을 만들 때 사용하는 태그
- 테이블 속성
- align : 테두리 정렬방식(left, right, center)
- border : 테이블 테두리, 생략하면 테두리 없음
- bordercolor : 테두리 색상
- width : 테이블의 너비(가로 길이)
- height : 테이블의 높이(세로 길이)
- bgcolor : 테이블 배경색
- background : 테이블에 배경 이미지 넣기
- cellspacing : 셀과 셀 사이의 여백
- cellpadding : 텍스트와 셀 사이의 여백
- 행 속성
- align : 행 전체의 수평 정렬(left, right, center)
- width : 행의 가로 길이
- height : 행의 세로 길이
- bgcolor : 행의 배경색
- 셀 속성
- valign : 셀의 수직 정렬(top, middle, bottom)
- align : 셀의 수평 정렬(left, right, center)
- width : 셀의 가로 길이
- height : 셀의 세로 길이
- bgcolor : 셀의 배경색
- background : 셀의 배경 이미지
- rowspan : 행 합치기
- colsapn : 열 합치기
테이블 태그 예제
- table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {width: 100px;}
</style>
</head>
<body>
<table border="1">
<caption>테이블1</caption>
<thead align="center"></thead>
<tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>
<tr><td rowspan="3">a1</td><td>b1</td><td>c1</td><td>d1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
<tr><td>a3</td><td>b3</td><td>c3</td></tr>
<tr><td colspan="4">a4</td></tr>
</table>
<br><br>
<table border="2">
<caption>테이블2</caption>
<thead align="center">
<tr> <th>a</th> <th>b</th> <th>c</th> <th>d</th> </tr>
<tr> <td rowspan="4">a1</td> <td colspan="3">b1</td> </tr>
<tr> <td>b2</td> <td>c2</td> <td>d2</td> </tr>
<tr> <td rowspan="2">b3</td> <td>c3</td> <td rowspan="3">d3</td> </tr>
<tr> <td>c4</td> </tr>
</thead>
</table>
</body>
</html>728x90
Comments