用CSS制作表格初级篇

简介:
在人们都开始使用div+css的时候往往忽略了表格的重要性,在很多场合如会员注册等表单的使用时用表格制作比div+css要更具效率性。
下面简单和大家分享一下如何用css来制作表格
在讲如何制作表格之前先和大家分享一下关于table的几个基本标签
table  表示表格的对象,tr表示表格的行,td表示每个单元格。这是使用最多3个的标签。
caption 定义表格的名称,tbody     定义表格内容区,thead    定义表格头,tfoot      定义表格页脚,th          定义表头的单元格。这些在传统的表格设计上几乎没有被使用,而在符合web标准的css布局中却非常实用。比如表头,如果使用thead来标记表头的话,那么对表头就不必再对tr进行特别的class制定,只要用table thead选择符就可以进行样式设计。
实例:
<table id="table">
<thead>
<tr>
<th>css特征1</th><th>css特征2</th><th>css特征3</th>
</tr>
<tbody>
<tr>内容1</tr><tr>内容2</tr><tr>内容3</tr>
</tbody>
<tfoot>
<tr>表格页脚</tr>
</tfoot>
</table>
这个例子应用了表格页头,内容和表格页脚3部分,都放在了id为table的标签中。
下面简单讲一下表格的样式控制
其实表格的样式控制和其他对象的样式控制没什么区别。一样是使用width,margin,border,等等属性来控制表格的样式。
这需要指出的一点是,在对表格对象进行样式控制是,需要注意到是“ border-collapse:collapse;”这个是属性设置,此属性是将表中中单元格之间的线条合并。如果不合并,那么每个单元格都将拥有1px的边框,(如果你的单元格边框为1px的话)而两个邻近的单元格的边框就是二者之和。如果使用了 border-collapse:collapse则可以避免类似情况出现。
 本博广告代码页面就是利用css控制表格来实现的。读者可以查看一下源代码!
地址: [url]http://www.2d30.cn[/url](原文章地址)
版权所有,转载时必须以链接形式注明作者和原始出处及本声明。
相关文章
|
8月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
82 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
108 0
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
2月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
107 12
|
6月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
249 0
|
5月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
7月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
7月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
66 1
|
7月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
99 1