[2021.07.27] 인턴 +148 HTML Tables(테이블) - 9
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
-> 이것은 테이블을 늘려줌
-> 하지만, 지우면 적당하게 보여진다
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
-> table 형태로 만들어줌
-> text 왼쪽 정렬
-> 글씨 크기 8픽셀
tr:nth-child(even) {
background-color: #dddddd;
}
-> 해당 테이블 row 행(가로)에서, 검은색으로 색칠한 것에 대한 옵션임
</style>
<!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>
<출력 결과>
-> 위의 3가지 style를 다 썼을 경우, 해당 이미지 처럼 보인다
----------------------------------------------------------------------------------------------------------------------------------
<출력 결과>
tr:nth-child(even) {
background-color: #dddddd;
}
-> 이것을 지운 모습
-> 해당 테이블 row 행(가로)에서, 검은색으로 색칠한 것에 대한 옵션임
----------------------------------------------------------------------------------------------------------------------------------
<출력 결과>
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
-> 이것을 지운 모습
-> table 형태로 만들어줌
-> text 왼쪽 정렬
-> 글씨 크기 8픽셀
-----------------------------------------------------------------------------------------------------------------------------------
<출력 결과>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
-> 이것을 지운 모습
-> 이것은 테이블을 늘려줌
-> 하지만, 지우면 늘어진 테이블이 적당하게 보여진다
-----------------------------------------------------------------------------------------------------------------------------
https://www.w3schools.com/html/html_tables.asp
HTML Tables
HTML Tables HTML tables allow web developers to arrange data into rows and columns. Example Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading
www.w3schools.com
-> 나머지는 내일 정리하겠다.
'Web' 카테고리의 다른 글
| [2021.07.28] 인턴 +149 HTML Block and Inline Elements - 11 (블록 및 인라인 요소) (0) | 2021.07.28 |
|---|---|
| [2021.07.28] 인턴 +149 HTML List(리스트) - 10 (0) | 2021.07.28 |
| [2021.07.27] 인턴 +148 HTML Image - 8 (0) | 2021.07.27 |
| [2021.07.27] 인턴 +148 HTML Link - 7 (1) | 2021.07.27 |
| [2021.07.27] 인턴 +148 HTML Styles(CSS) - 6 (0) | 2021.07.27 |
댓글