반응형
- code -
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>표 만들기</h2>
<table>
<tr>
<th>이름</th>
<th>성별</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>남</td>
<td>30</td>
</tr>
<tr>
<td>신사임당</td>
<td>여</td>
<td>35</td>
</tr>
<tr>
<td>세종대왕</td>
<td>50</td>
<td>남</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>이름</th>
<th>성별</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>남</td>
<td>30</td>
</tr>
<tr>
<td>신사임당</td>
<td>여</td>
<td>35</td>
</tr>
<tr>
<td>세종대왕</td>
<td>50</td>
<td>남</td>
</tr>
</table>
</body>
</html>표 만들기
| 이름 | 성별 | 나이 |
|---|---|---|
| 홍길동 | 남 | 30 |
| 신사임당 | 여 | 35 |
| 세종대왕 | 50 | 남 |
| 이름 | 성별 | 나이 |
|---|---|---|
| 홍길동 | 남 | 30 |
| 신사임당 | 여 | 35 |
| 세종대왕 | 50 | 남 |
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 경고창(alert) 확인 / 취소 띄우기! (0) | 2020.10.26 |
|---|---|
| [HTML & CSS] 레이아웃(layout) 기본틀 (0) | 2020.10.23 |
| [HTML & CSS] 리스트(list) 표기법 ! (0) | 2020.10.22 |
| [HTML & CSS] 버튼에 링크달기(button link) (0) | 2020.10.13 |
| [HTML & CSS] 이미지 호버(image hover) 하는 방법 !!! (0) | 2020.10.10 |
댓글