什么时候需要table
当需要展示表格数据时,我们就使用<table>来展示
表格用于展示表格式数据,表格的作用不在于外观,外观是css的工作。
排版和列表不是表格做的事情,应该各尽其职,使用列表或者DIV实现表格,是不合适方法。
我们把表格中每一小块数据叫做单元格。
我们需要在表格数据和单元格之间添加补白,使得单元格数据更易阅读。
表格单元的确包含了补白和一个边框,不过没有边界。
表格单元不存在边界,它只有边框四周的空间而已,而这个空间是为整个表格设置的(border-spacing)。
表格单元不能单独设置边框间距。
注意:tr元素没有border样式,对tr设置border样式无任何效果。
所以边框间距就是table和td/th的border的间距。
压缩边框,除border-spacing外还有border-collapse属性(不但可以消除边框间距,并且两个相邻的边框合并为一个边框)
两者的区别:
border-spacing会合并变粗,因为2个边框重合了。
border-collapse会压缩边框,一条边框的效果。
注意:table除了使用rowspan colspan 其他所有都用CSS样式控制,不建议使用表格自己的样式属性。
如<table width="100px">
table如果不设置高宽,它的大小随着内容的变化而变化,所以只有margin-left:100px有效果,margin-right:100px不起效果
<style type="text/css"> table { margin-left:100px; margin-right:100px; border:thin solid gray; caption-side:top; border-collapse:collapse; } td, th { border:thin solid gray; padding:5px; } th { background-color:#D90000 } caption { font-style:italic; padding-top:10px; } .dubbocolor { background-color:#C8FFFF } table table { margin:0px; } table table th { background:none; } </style> <table> <caption> 课程表 </caption> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td>语文</td> <td>英语</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr class="dubbocolor"> <td rowspan="2">化学</td> <td>地理</td> <td>体育</td> <td>数学</td> <td>数学</td> </tr> <tr class="dubbocolor"> <td>英语</td> <td>数学</td> <td>数学</td> <td><table> <tr> <th> 上半节 </th> <td> 自修 </td> </tr> <tr> <th> 下半节 </th> <td> 政治 </td> </tr> </table></td> </tr> <tr> <td>语文</td> <td>英语</td> <td colspan="2">数学</td> <td>英语</td> </tr> </table>
本文讲解了html table基础原理,实际开发中,网上会有很多现成的css 表格模板,直接拿来用就可以了,完全没有必要再重复造轮子。
百度搜 CSS样式表格 就能搜出一堆非常精美的表格模板。
由于大多数时候,表单在布局上都是表格形式的,所以我们用表格来布局表单。
没有必要用DIV+CSS来布局表单,浪费时间。
相关推荐
ul li表格.htm ul li表格.htm ul li表格.htm
通过html语言制作个人简历表格源码共享,可根据自己需求做出更改
表格拖动.htm表格拖动.htm表格拖动.htm表格拖动.htm表格拖动.htm
验证表格-使用HTM-CSS-JAVASCRIPT:验证表格
滴答从3.8.2开始接口帮助文档采用CHM格式,而将不在使用以前的HTM文档格式,CHM格式文档将全面包括滴答中所有接口的帮助说明,而且更容易搜索和查找功能接口,帮助用户尽快上手. 滴答的绑定模块异常灵活,主要表面以下...
默认情况下,表格的边框为0,我们可以为表格设置边框线。 基本语法 语法解释 通过BORDER属性定义边框线的宽度,单位为像素。 文件范例:10-2.htm 设定边框线的宽度。01 <!– —————————— –>02 <!–...
如果你所使用的操作系统是windows98,则操作方法略有不同,需要在“工作表.htm”上按住shift键的同时点击鼠标右键,之后再进行上述操作。 用Word程序打开该文件后,不要做任何编辑操作,直接点击“文件”→“另存...
RGB颜色查询对照表.htm
是一款面向个人软件作者的表格控件。她集模板化开发、公式运算、数据显示/展现于一体,同时也具备了报表产品 的 数据源绑定,数据统计和打印输出的功能,并开放了柱状图表应用功能,帮助个人软件作者灵活快速地响应...
poi将word里面的内容转换成html、包括word里面字体的大小、表格的处理、还有图片、段落等等...
滴答从3.8.2开始接口帮助文档采用CHM格式,而将不在使用以前的HTM文档格式,CHM格式文档将全面包括滴答中所有接口的帮助说明,而且更容易搜索和查找功能接口,帮助用户尽快上手. 滴答的绑定模块异常灵活,主要表面以下...
Spread for ASP.NET 表格控件 V7.0 使用指南 http://www.gcpowertools.com.cn/products/spread_studio_demo.htm
如果不使用嵌套,表格非常复杂,浏览者要等待很长时间才能看到网页的内容。 出于这些原因,引入嵌套表格。由总表格负责整体的排版,由嵌套的表格负责各个子栏目的排版,并插入到总表格的相应位置中。这样一来...
【使用步骤】 运行Word2Htm.exe,点击“打开目录”,选择您想要转换的doc文档存放的目录 从左侧“目录名称”中选择子目录,点击“搜索文档”,右侧就直接将所有符合条件的doc文档列出来了 在右侧区域选择你要转换...
纯HTML的固定列的,列任意指定,滚动效果平滑。
标记之间的就是标题的内容,这个标记使用在标记中. 文件范例:10—14.htm 通过标记设定表格的标题。01 <!– —————————— –>02 <!– 文件范例:10-14.htm –>03 <!– 文件说明:设定表格的标题 –...
• 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 • 2.5.htm 引号的转义使用 • 2.6....
php中文使用手册(htm)MYSQL中文使用手册!!!!!!
python库requests_htm 、BeautifulSoup与requests 综合应用案例;下一个 BeautifulSoup与requests库精简掉了了。资源案例后续上传。
• 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 • 2.5.htm 引号的转义使用 • 2.6....