本文深入探讨HTML表格创建及CSS样式应用，包括表格标题、边框间距设置、跨行跨列元素、颜色设定和列表标记等内容。通过实例演示如何高效实现表格数据展示与美观布局。
CSS
caption是标题,caption-side:top默认值。把表格标题定位在表格之上。
bottom把表格标题定位在表格之下。
inherit规定应该从父元素继承 caption-side 属性的值。
单元格和盒模型相似,但单元格没有外边距,不能单独控制各个表格单元的边框间距。而要统一通过border-spacing来设置.
border-spacing:10px 30px;可以在垂直和水平方向设置不同的边框间距
border-collapse:collapse;折叠边框 (单元格边框合并为一个边框,让外观更简洁)
HTML的表格元素<table><tr><th><td>一起用于创建表格
- <tr>定义行,要放在<table>中.
- <th>是表头
- <td>定义每行的单元格. rowsplan/clospan分别实现跨行/跨列表格
- <caption>用来提供表格的额外信息
一般格式看起来像这样
<body>
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头一</th>
<th>表头二</th>
</tr>
</thead>
<tbody>
<tr>
<td>每行单元格</td>
<td>每行单元格</td>
</tr>
<tr>
<td>每行单元格</td>
<td>每行单元格</td>
</tr>
</tbody></table>
</body>
摘要(慕课网补充)
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。放在<body>下
语法：<table
summary="表格简介文本">
为表格设置颜色
th{background-color:#cc6600;} (设置表头颜色)
.cellcolor{background-color:#cc6600;}(设置表行颜色)
<th rowspan="3">内容</th>单元格跨多行（记得说明扩列数）
<td colspan="3">内容</tr>单元格跨多列 (同一行的内容会被推向右侧，考虑是否要删除)
同一个<td>,<th>可以既跨行又跨列.
HTML是按行指定表格，而不是按列指定。指定每一行的<td>元素就隐含地指定各列。
如果一行中没有足够的元素，要保留<td></td>留空，否则内容不能正确排列
如果确实需要在页面中创建表格数据，就使用HTML表格
如果是为了建立类似表格的表现方式，就使用CSS表格创建多栏页面布局
列表标记类型
li{
list-style-type:circle/disc/square/none
decimal(十进制数)upper-alpha大写字母lower-alpha小写字母
upper-roman大写罗马lower-roman小写罗马;
}
li {
list-style-image:url(images/backpack.gif);定制标记
padding-top:5px;
margin-left:20px;
}
<tr>另起一行<tr>要放在<table>中，不能单独使用
<th>是表头
How to use table 摘要(Cousera html5补充)
- Sketch/Draw the layout before you code!!
- Decide on the num of rows横 and columns纵
- Decide if any rowscolums with span multiple cells
- Should only be used for tabular data
- 一开始就规划好远比后面修修补补强
- 可以先为table标签添加border值,方便看到边框效果
- link text to the table可用caption,不用h2,3..无法语义化
- 定义和用法
- caption标签定义表格的标题。
- caption标签必须直接放置到table标签之后。
- 每个表格只能规定一个标题。
- 通常标题会居中显示在表格上方
<html>
<body>
<style>
tr { height:60px;}
</style>
<table width="300" border="1">
<caption>标题</caption>
<colgroup>
<col width="100" />
<col width="100" />
<col width="100" />
</colgroup>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>one</td>
<td rowspan="2">one</td>
<td>one</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">one</td>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>one</td>
<td rowspan="2">one</td>
<td>one</td>
</tr>
<tr>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
</table>
</body>
</html>
扫一扫
7661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
