728x90
๋ฐ์ํ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
td,th{
border: 1px solid black;
text-align: center;
border-radius: 6px;
}
th{
background-color: lightgray;
color: blue;
}
tfoot td{
background-color: lightgray;
font-weight: bold;
}
caption{
font-weight: bold;
color: forestgreen;
}
.price{
color: red;
font-weight: bold;
font-size: large;
}
.room {
background-color: lightpink;
}
.none{
background-color: lightskyblue;
}
</style>
<body>
<table>
<caption>์์๋๋ผ ๊ฐ์ค</caption>
<thead>
<tr>
<th>๋ฐฉ์ด๋ฆ</th>
<th>๋์</th>
<th>ํฌ๊ธฐ</th>
<th>๊ฐ๊ฒฉ</th>
</tr>
</thead>
<tbody>
<tr>
<td class="room">์ ์ฑ๋ฐฉ</td>
<td>์ฌ์ฑ ๋๋ฏธํ ๋ฆฌ</td>
<td rowspan="3">4์ธ์ค</td>
<td rowspan="4" class="price">1์ธ 20,000์</td>
</tr>
<tr>
<td rowspan="2" class="room">๋๋ฐฑ๋ฐฉ</td>
<td>๋์ฑ๋๋ฏธํ ๋ฆฌ</td>
</tr>
<tr>
<td>๊ฐ์กฑ 1ํ</td>
</tr>
<tr>
<td class="room">์ฒํํฅ๋ฐฉ</td>
<td class="none">-</td>
<td>2์ธ์ค</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">๋ฐ๊นฅ์ฑ ์ ์ฒด๋ฅผ ๋ ํธํฉ๋๋ค</td>
</tr>
</tfoot>
</table>
</body>
</html>
728x90
๋ฐ์ํ
'๐ HTML,CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML&CSS 16์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
|---|---|
| HTML&CSS 15์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS ์ค์ต3 (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 14์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 13์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |