正常的普通表格
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
table
{
border-color:blue;
text-space-collapse:collapse;
border-spacing:0px;
}
td
{
padding:5px;
border-color:blue;
}
th
{
border-color:blue;
background-color:green;
height:35px;
}
</style>
</head>
<body>
<table border="1">
<caption>图书</caption>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>中国古代音乐漫谈</td>
<td>王某</td>
<td style="text-align:right;">50.00</td>
</tr>
<tr>
<td>中国古代文学漫谈</td>
<td>刘某</td>
<td style="text-align:right;">100.00</td>
</tr>
<tr>
<td>中国古代数学漫谈</td>
<td>吴某</td>
<td style="text-align:right;">40.00</td>
</tr>
<tr>
<td>中国古代历史漫谈</td>
<td>张某</td>
<td style="text-align:right;">80.00</td>
</tr>
</tbody>
</table>
</body>
</html>
截图如下：
添加col和colgroup的表格
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table style="background-color:black;border-collapse:separate;border-spacing:1px;">
<caption><b>图书</b></caption>
<!--定义所有列的背景色都是白色-->
<colgroup style="background-color:white;">
<!--设置第一列列宽-->
<col style="width:160px;" />
<!--定义横跨2列，设置这两列列宽-->
<col span="2" style="width:100px;" />
</colgroup>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>中国古代音乐漫谈</td>
<td>王某</td>
<td style="text-align: right;">50.00</td>
</tr>
<tr>
<td>中国古代文学漫谈</td>
<td>刘某</td>
<td style="text-align: right;">100.00</td>
</tr>
<tr>
<td>中国古代数学漫谈</td>
<td>吴某</td>
<td style="text-align: right;">40.00</td>
</tr>
<tr>
<td>中国古代历史漫谈</td>
<td>张某</td>
<td style="text-align: right;">80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align:right;">现总计： 4本书</td>
</tr>
</tfoot>
</table>
</body>
</html>
截图如下：
4949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
