<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>购物车</title>
<style>
html {
font-size: 14px;
}
table {
border-collapse: collapse;
width: 70%;
margin: auto;
color: coral;
font-weight: lighter;
text-align: center;
}
th,
td {
border-bottom: 1px solid blue;
padding: 10px;
}
table caption {
font-size: 1.5rem;
margin-bottom: 15px;
color: darkgreen;
}
table th {
font-weight: lighter;
color: white;
background-color: rgb(23, 175, 109);
}
/* 鼠标悬停 */
tr:hover {
background-color: salmon;
}
/* 隔行变色 */
table tbody tr:nth-of-type(even) {
background-color: aqua;
}
table tfoot td {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<!-- 标题 -->
<caption>
购物车
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>品名</th>
<th>单价/元</th>
<th>单位</th>
<th>数量</th>
<th>金额/元</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>1000</td>
<td>电脑</td>
<td>2000.00</td>
<td>台</td>
<td>2</td>
<td>4000</td>
</tr>
<tr>
<td>1001</td>
<td>水杯</td>
<td>1000</td>
<td>个</td>
<td>3</td>
<td>3000</td>
</tr>
<tr>
<td>1001</td>
<td>水杯</td>
<td>5000</td>
<td>个</td>
<td>3</td>
<td>15000</td>
</tr>
<tr>
<td>1001</td>
<td>水杯</td>
<td>3000</td>
<td>个</td>
<td>3</td>
<td>9000</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<td colspan="2">总计:</td>
<td>11000</td>
<td>总数:</td>
<td>11</td>
<td>总计:5200</td>
</tfoot>
</table>
</body>
</html>
div写法
<!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 {
display: table;
border: 1px solid rgb(5, 5, 5);
width: 300px;
text-align: center;
margin: auto;
}
/* 标题 */
.table-caption {
display: table-caption;
margin-bottom: 10px;
font-size: 1.5rem;
}
/* 表头 */
.table-thead {
display: table-header-group;
background-color: grey;
}
/* 行 */
.table-row {
display: table-row;
}
/* 列 */
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
/* 主体 */
.table-tbody {
display: table-row-group;
}
.table-tfoot {
display: table-footer-group;
}
/* 列分组 */
.table-colgroup {
display: table-column-group;
}
.table-colgroup .table-col:first-of-type {
display: table-column;
background-color: lightgreen;
}
.table-colgroup .table-col {
display: table-column;
background-color: lightpink;
}
</style>
</head>
<body>
<!-- 表格 -->
<div class="table">
<!-- 标题 -->
<div class="table-caption">员工信息表</div>
<!-- 列分组 -->
<div class="table-colgroup">
<div class="table-col"></div>
<div class="table-col"></div>
<div class="table-col"></div>
</div>
<!-- 表头 thead-->
<div class="table-thead">
<!-- 行 -->
<div class="table-row">
<div class="table-cell">ID</div>
<div class="table-cell">姓名</div>
<div class="table-cell">职务</div>
</div>
</div>
<div class="table-tbody">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">小王8</div>
<div class="table-cell">运维</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">小张</div>
<div class="table-cell">开发</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">小朱</div>
<div class="table-cell">美工</div>
</div>
</div>
<!-- 底部 -->
<div class="table-tfoot">
<div class="table-row">
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
</div>
</div>
</div>
</body>
</html>