HTML设计显示表格

表格在最初的HTML中，仅仅是用于存放各种数据的，因此，表格有很多与数据相关的标记，非常方便。

<span style="font-size:24px;"><html><head><title>年度收入</title><style><!----></style></head><body><table summary="This table shows the yearly income for years 2004 through 2007" border="1"><caption>年度收入 2004-2007</caption><tr><th></th><th scope="col">2004</th><th scope="col">2005</th><th scope="col">2006</th><th scope="col">2007</th></tr><tr><th scope="row">捐款</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">拨款</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">投资</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">募捐</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr><tr><th scope="row">销售</th><td>11.980</td><td>12.650</td><td>9.700</td><td>10.600</td></tr></table></body>
</html>
</span>

代码如上，在<table>标记中，使用border属性设置了表格的外框，summary属性，该属性的值用于概括表格的内容，注意，在浏览器页面中它是不可见的，但是，随意搜索引擎非常重要。

<caption>标记的作用就是设置表格的大标题，该标记可以放在<table>与</table>之间的任意位置，不过通常放在第一行。

此外，如果设置表格标题的位置，添加CSS属性就可以实现，但是，<caption>标记有专门的属性caption-side，用于调整表格标题的位置，但是，该属性只在Firefox中有效，IE不支持。

<span style="font-size:24px;">table{caption-side:bottom;
}</span>

<th>标记设置表格中，行或者列的名称，其中，<th>标记的scope属性是用来区分行名称和列名称的，分别设置scope的值为row或者col即可。

在HTML页面中应该尽量遵循表格的标准标记，养成良好的习惯，并适当地利用tab、空格和空行来提高代码的可读性，降低后期的维护成本。

HTML设计显示表格相关推荐

jquery mysql表格_使用jQuery设计数据表格：设计表格基类
[IT168专稿]当前在Web开发中,jQuery和PHP无疑是绝佳的配合.其中PHP由于其简单易用,深得开发者的喜爱,而jQuery则由于在前端开发中的灵活和简单,功能强大,可以做出很多很眩目的效果 ...
B端设计指南——表格究竟应该如何设计？
目前我主要深耕于B端设计中,深知B端表格设计与C端有很大的不同,无论是表格的展示形式以及承载内容上都有非常大的差异.而现在网上有不少关于表格如何设计的文章,但要真正落到实处的少之又少,因此今天我们就来 ...
jsp中html的表格table不显示,使用jsp显示表格信息
编号姓名 <...> 将下面的代码,粘贴复制到jsp 中 } //删除功能 function deletHero(elm) { elm.parentElement.parentEleme ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
前端学习笔记一：HTML（4）在网页内插入并设计一个表格
继续. 第六段代码,管它叫两个表格. 虽然叫两个表格,但是因为都是表格内容重复度有点大,因此选个复杂一点来讲. 先看代码: <!DOCTYPE html> <html>< ...
R语言使用gt包和gtExtras包漂亮地显示表格数据：gtExtras包的gt_hulk_col_numeric函数对单列、多列数据进行着色、使用不同的调色板（color palette）对列着色
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gt包可视化表格数据,使其易于阅读和理解.gtExtras包的gt_hulk_col_numeric函数对单列.多列数据进行着色.使 ...
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gt包可视化表格数据，使其易于阅读和理解、使用gtExtras包添加一个图，显示表中某一列中的数字
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gt包可视化表格数据,使其易于阅读和理解.使用gtExtras包添加一个图,显示表中某一列中的数字目录
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gt包可视化表格数据，使其易于阅读和理解、使用gtExtras包添加一个图，显示表中某一列中的数字、并为类型数据添加图像符号标签
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gt包可视化表格数据,使其易于阅读和理解.使用gtExtras包添加一个图,显示表中某一列中的数字.并为类型数据添加图像符号标签目 ...
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gtExtras包添加一个图，显示表中某一列中的数字、并自定义表格数据显示的主题格式、并自定义数值数据的格式（例如百分比）
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gtExtras包添加一个图,显示表中某一列中的数字.并自定义表格数据显示的主题格式.并自定义数值数据的格式(例如百分比) 目录

HTML设计显示表格

HTML设计显示表格相关推荐

最新文章

热门文章