table
태그의 한 종류로 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용
간단히 말하면 표를 만드는 요소라고 생각하면 된다.
기본 구성 태그
<table> </table> # 테이블을 만드는 태그 <thead></thead><tbody></tbody><tfoot></tfoot> # HTML테이블에서 내용 콘텐츠들을 하나의 그룹으로 묶을때 사용 <th> </th> # 테이블의 머리(헤더)부분을 만드는 태그 <tr> </tr> # 테이블의 행을 만드는 태그 <td> </td> # 태이블의 열을 만드는 태그
디자인 변경 속성
- border : 테이블의 테두리
- bordercolor : 테이블의 테두리 색상
- width : 테이블 가로 크기
- height : 테이블 세로 크기
- align : 정렬
- bgcolor : 배경색
- colspan : 가로 합병(열 합병)
- rowspan : 세로 합병(행 합병)
예시
수정 필요!! 열 위치도 안맞고 테두리 구현 해야함
<!DOCTYPE html>
<html>
<head>
<title>Ship To It - Company Packing List</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table>
<tbody>
<ul class="navigation">
<li><img src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png" height="20px;"></li>
<li class="active">Action List</li>
<li>Profiles</li>
<li>Settings</li>
</ul>
<thead>
<tr>
<th scope = "col">Company Name</th>
<th scope = "col">Number of Items to Ship</th>
<th scope = "col">Next Action</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Adam's Greenworks</td>
<td rowspan="2">14</td>
<td>Package Items</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tfoot>
<tr>
<td>Total</td>
<td>28</td>
</tr>
</tfoot>
</tbody>
<div class="search">Search the table</div>
<table>
</body>
</html>