HTML Table
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
일단 th는 header행을 의미합니다.
기본적으로 중앙정렬과 굵은글씨가 디폴트(default: 기본값)로 셋팅이 됩니다.
td또한 행을 의미하는데 td와는 달리 디폴트값이 표준 텍스트인 좌측정렬에 기본폰트를 제공하기 때문에 내용을 입력하는데 쓰입니다.
tr은 테이블 로우를 뜻하므로 열이라고 생각하시면 됩니다.
즉 10줄을 만드실거면 결국 세가지 모두 열번 입력하는 과정이 필요합니다.
위표에 대한 스크립트를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<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>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
'IT > HTML' 카테고리의 다른 글
| 모던웹을 위한 HTML5 + CSS3 바이블 3판 후기 (0) | 2019.08.09 |
|---|
