ソースコード表示
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーブルサンプル(料金表)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 20px 0;
width: 450px;
margin: 0 auto;
border: #fff 1px solid;
}
table {
width: 100%;
border-collapse: collapse;
}
table caption {
font-size: 26px;
font-weight: bold;
}
table tr:nth-child(2) {
font-size: 30px;
font-weight: bold;
}
table tr:nth-child(4) {
border-bottom: 1px #ccc solid;
}
table th {
width: calc(100% / 3);
color: #fff;
font-size: 22px;
padding: 10px 0px 10px 0px;
text-align: center;
border: 1px #ccc solid;
}
table th:nth-child(1) {
background-color: #868686;
}
table th:nth-child(2) {
background-color: #d41818;
}
table th:nth-child(3) {
background-color: #2a7196;
}
table td {
padding: 10px 0px 10px 0px;
text-align: center;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
}
table td a {
background-color: #25b327;
text-decoration: none;
color: white;
padding:5px 20px;
border-radius: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<caption>料金プラン</caption>
<tr><th>無料プラン</th><th>初級プラン</th><th>上級プラン</th></tr>
<tr><td>\0</td><td>\4,000</td><td>\8,000</td></tr>
<tr><td><a href="#">申し込み</a></td><td><a href="#">申し込み</a></td><td><a href="#">申し込み</a></td></tr>
<tr><td>保障なし</td><td>保障1ヶ月</td><td>保障3ヶ月</td></tr>
</table>
</div>
</body>
</html>