表格的常用樣式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的常用樣式</title>
<style>
table{
/* /* border: 1px solid; */
border-collapse: collapse;
width: 80%;
text-align: center;
}
/* 表格線應該加到td/th */
table td {
border: 1px solid;
}
table caption {
font-weight: bolder;
margin-bottom: 15px;
/* text-align: center; */
}
</style>
</head>
<body>
<table>
<!-- 標題 -->
<caption>
商品資訊表
</caption>
<!-- tr*5>td{x}*6 5行6列 -->
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
</body>
</html>