1. HTML Tables(중요)
: 표를 만드는 방법, 홈페이지의 레이아웃을 잡을 때도 사용 가능
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table><table>: table 정의<th>: 테이블의 제목(행)<td>: 테이블의 행<tr>: 테이블의 열
2. Table Size
- 테이블 너비
<table>요소에style특성을 추가해 테이블의 너비를 설정할 수 있다.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>- 테이블 열 너비
- 특정 열의 크기를 설정하려면
<th>,<td>요소에style특성을 추가한다
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>- 테이블 행 높이
- 특정 행의 높이를 설정하려면
<tr>특성에style요소를 추가한다
3. Table Header
- 테이블 헤더
<th>: 행을 테이블 헤더로 나타내는 요소
-> 첫 번째 열을 테이블 헤더로 사용하려면 각 행의 첫 번재 셀을 요소로 정의한다.
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
</table>- 테이블 헤더 정렬
- 기본적으로 테이블 헤더는 굵은 글씨로 중앙에 위치한다
text-alignCSS 특성을 이용해 테이블 헤더를 왼쪽으로 정렬할 수 있다
th {
text-align: left;
}- 여러 열에 대한 헤더
<th>요소의colspan특성을 사용하여 두 개 이상의 열에 걸쳐 있는 헤더를 만들 수 있다.
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
</table>4. HTML Table Padding & Spacing
- 셀 패딩
- 셀 모서리와 셀 함량 사이의 공간
- 기본적으로 0으로 설정
paddingCSS 속성을 사용하여 변경 가능
th, td {
padding: 15px;
}- 콘텐츠의 측면에만 패딩을 추가하려면
<padding-top>,<padding-bottom>,<padding-left>,<padding-right>
- 셀 spacing
- 각 셀 사이의 공간
- 기본적으로 2픽셀로 설정
border-spacing tablecss 속성을 사용하여 변경 가능
table {
border-spacing: 30px;
}5. HTML Table Colspan & Rowspan
- colspan
colspan요소를 사용하여 여러 열에 걸쳐 셀을 만들 수 있다.
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
</table>- rowspan
rowspan요소를 사용하여 여러 행에 걸쳐 셀을 만들 수 있다.
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
</table>6. Table Styling
td:nth-child(even),th:nth-child(even): 테이블의 색상 지정 가능
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}7. Colgroup
<colgroup>: 특정 열의 스타일을 지정하는데 사용
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
</table>
</body>
</html><span>: 스타일을 얻는 열 수를 지정<col>: 비어있는 요소를 삽입visibility: collapse: 열을 숨길 수 있는 속성
감자에옹