<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style> /* - 내부스타일 */
table{
border : 3px solid blue;
margin : 50px;
}
th{
width : 300px;
height : 50px;
background-color : pink;
font-size : 2.0em;
}
td{
text-align : center;
height : 40px;
}
#tab2{ // 위에 있는 table을 그대로가져온다
border-collapse : collapse;
}
#tab2 th{
background-color : orange;
}
</style>
</head>
<body>
<table id="tab1" border="1">
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
<tr>
<td style="background-color:skyblue; text-align: right;">데이터1-1</td>
<td>데이터1-2</td>
<td>데이터1-3</td>
</tr>
<tr>
<td>데이터2-1</td>
<td>데이터2-2</td>
<td>데이터2-3</td>
</tr>
<tr>
<td>데이터3-1</td>
<td>데이터3-2</td>
<td>데이터3-3</td>
</tr>
</table>
<table id="tab2" border="1">
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
<tr>
<td>데이터1-1</td>
<td>데이터1-2</td>
<td>데이터1-3</td>
</tr>
<tr>
<td>데이터2-1</td>
<td>데이터2-2</td>
<td>데이터2-3</td>
</tr>
<tr>
<td>데이터3-1</td>
<td>데이터3-2</td>
<td>데이터3-3</td>
</tr>
</table>
</body>
</html>
😀 실행
'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글
| [HTML] iframe (0) | 2022.12.20 |
|---|---|
| [HTML] 테이블병합-1220 (0) | 2022.12.20 |
| [HTML/notepad++] id를 이용한 a링크-1219 (0) | 2022.12.20 |
| [HTML/notepad++] 구분선-1219 (0) | 2022.12.19 |
| [HTML/notepad++] 리스트-1219 (0) | 2022.12.19 |