CSS编写表格 - 360文档中心

使用CSS美化表格的样式

使用CSS美化表格的样式
使用CSS美化表格的样式
31 设置表格边框的样式 2 设置表格边框的宽度 3 设置表格边框的颜色
设置表格边框的样式
3
当table表格的描述标记border值大于0时，显示边框，如果border的值为 0 ，则不显示边框。边框显示之后，可以使用CSS的border-collapse属性对边框进行修饰。
使用CSS美化表格的样式
设置表格边框的颜色
11
使用CSS美化表格的样式
设置表格边框的颜色
12
表格带有边框，边框样式显示为绿色，表格背景色为黄色，其中一个单元格背景色为蓝色。
使用CSS美化表格的样式
知识点回顾：
13
设置表格边框的样式设置表格边框的宽度
设置表格边框的颜色
案例见使用CSS美化表格的样式案例.doc文档
表格带有边框显示，其边框宽度为1像素，用直线显示，并且边框进行了合并。
表格中每个单元格都以1 像素、直线的方式显示边框，并将显示对象右对齐。
使用CSS美化表格的样式：用来设置表格边框的宽度，从而来美化边框宽度。如果需要单独设置某一个边框的宽度，可以使用border-width的衍生属性进行设置 border-top-width和border-left-width等。
其语法格式为：
默认值，表示边框会被分开。表示边框会合并为一个单一的边框。
使用CSS美化表格的样式
设置表格边框的样式
4
使用CSS美化表格的样式
设置表格边框的样式
表格边框
边框重叠
表格标题边框单元格边框
5
使用CSS美化表格的样式
设置表格边框的样式
6
表格标题“2011季度07-09”也带有边框显示，字体大小为150 个像素，字形是幼圆并加粗显示。

使用CSS设置表格样式

使用css设置表格样式
目录
• 表格样式基本概念与CSS应用 • 边框与背景设置技巧 • 单元格内容与格式调整策略 • 响应式布局在表格中实践 • 交互效果增强方法探讨 • 总结回顾与未来趋势预测
01 表格样式基本概念与CSS 应用
CSS在表格布局中作用
控制表格及单元格大小
通过CSS的`width`、`height`属性设置表格或单元格的宽高。
改变行背景色或添加选中样式
在用户点击行时，可以通过改变行的背景色或添加选中样式来提供视觉反馈，让用户清楚地知道哪一行被选中。
结合AJAX实现异步操作
如需在用户点击行时加载更多数据或执行其他异步操作，可以结合AJAX进行处理。
动态数据更新时保持样式一致性
使用CSS类名控制样式
将表格的样式定义在CSS类名中，而不是直接写在HTML标签内。这样，在动态更新数据时，只需更新数据内容而无需修改样式代码，即可保持样式一致性。
随着CSS技术的不断发展，将能够创建更加个性化、独特的表格样式，满足设计师和用户的多样化需求。
THANKS FOR WATCHING
感谢您的观看
调整边框与间距
使用CSS的`border`、`padding`、 `margin`属性调整表格及单元格的边框粗细、内边距和外边距。
设置背景与颜色
通过CSS的`background-color`、 `color`等属性设置表格及单元格的背景色和字体颜色。
控制文本对齐与排版
利用CSS的`text-align`、`verticalalign`等属性控制文本在单元格中的水平和垂直对齐方式。
2
在使用`border-collapse: separate;`时，可以使用`border-spacing`属性定义单元格边框之间的间距。

20个很漂亮的CSS表格

并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。

现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）#1. TableclothTablecloth 由CSS Globe开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。

#2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。

#3. A CSS styled table version 2Veerle Duoh为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。

#4. Sortable TableSortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。

#5. Row Locking with CSS and JavaScript演示了如何利用Javascript 和CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。

#6. Vertical scrolling tables如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。

通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。

#7. Replicating a Tree table利用HTML 和CSS 建立的树状表格。

#8. Collapsible tables with DOM and CSS利用DOM 和CSS 建立的可折叠的表格效果。

表格页脚部分包含的箭头有一个名为“footcollapse”的类，通过为之添加Javascript 代码可以让表格展开或折叠。

css 实现表格合并单元格的实现方法

一、介绍CSSCSS，全称为层叠样式表（Cascading Style Sheets），是一种对网页进行样式和布局美化的技术。

通过CSS，网页设计者能够控制页面元素的外观、排版和布局，使得网页看起来更加美观、专业。

二、表格合并单元格的需求在网页设计中，表格是经常使用的一种元素，用于展示数据和信息。

有时候，我们需要将表格中的若干个单元格合并成一个大的单元格，以便更好地展示和组织信息。

当需要制作一个课程表或者日程安排表格时，通常会有需要将某些时间段内的课程或活动合并在一个单元格内。

三、实现方法在CSS中，要实现表格中单元格的合并，可以使用一些技巧和属性来实现。

1. 使用colspan和rowspan属性在HTML的表格标签中，可以使用colspan和rowspan属性来实现单元格的合并。

例如：```html<table border="1"><tr><td colspan="2">1</td><td>2</td></tr><tr><td>3</td><td>4</td><td>5</td></tr></table>```上面的例子中，使用colspan属性将第一行的前两个单元格合并成一个单元格。

2. 使用CSS的position属性和z-index属性在CSS中，还可以使用position属性和z-index属性来实现单元格的合并。

例如：```html<style>.cell1 {position: relative;z-index: 1;}.cell2 {position: relative;z-index: 2;}</style><table border="1"><tr><td class="cell1">1</td> <td class="cell2">2</td> </tr><tr><td>3</td><td>4</td></tr></table>```上面的例子中，使用position属性和z-index属性来控制单元格的层级关系，从而实现单元格的合并。

div+css制作表格

div+css制作表格<div class="table"><h2 class="table-caption">花名册：</h2><div class="table-column-group"><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div></div><div class="table-header-group"><ul class="table-row"><li class="table-cell">序号</li><li class="table-cell">姓名</li><li class="table-cell">年龄</li></ul></div><div class="table-footer-group"><ul class="table-row"><li class="table-cell">footer</li><li class="table-cell">footer</li><li class="table-cell">footer</li></ul></div><div class="table-row-group"><ul class="table-row"><li class="table-cell">1</li><li class="table-cell">John</li><li class="table-cell">19</li></ul><ul class="table-row"><li class="table-cell">2</li><li class="table-cell">Mark</li><li class="table-cell">21</li></ul><ul class="table-row"><li class="table-cell">3</li><li class="table-cell">Kate</li><li class="table-cell">26</li></ul></div></div>cssul{margin:0;padding:0;list-style:none;}.table{display:table;border-collapse:collapse;border:1px solid #ccc;}.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}.table-column-group{display:table-column-group;}.table-column{display:table-column;width:100px;}.table-row-group{display:table-row-group;}.table-row{display:table-row;}.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}.table-footer-group{display:table-footer-group;}。

HTML5+CSS3 表格设计(Table)【范本模板】

CSS样式：[css］view plaincopy1.<style>2.3.body ｛4.width： 600px;5.margin： 40px auto；6.font-family: ’trebuchet MS’, ’Lucida sans’, Arial；7.font-size: 14px；8.color：＃444；9.}10.11.table {12.*border-collapse: collapse；/* IE7 and lower ＊/13.border—spacing： 0；14.width： 100%;15.}16.17..bordered ｛18.border： solid ＃ccc 1px；19.—moz-border—radius: 6px；20.-webkit—border-radius: 6px;21.border-radius： 6px；22.-webkit—box—shadow: 0 1px 1px ＃ccc；23.-moz-box—shadow: 0 1px 1px #ccc；24.box—shadow: 0 1px 1px ＃ccc;25.｝26.27..bordered tr：hover {28.background：＃fbf8e9;29.—o-transition: all 0.1s ease-in—out；30.-webkit-transition: all 0.1s ease-in-out;31.—moz-transition： all 0。

1s ease—in—out；32.—ms—transition: all 0。

1s ease-in-out;33.transition： all 0.1s ease-in-out；34.}35.36..bordered td， .bordered th {37.border—left: 1px solid #ccc;38.border-top： 1px solid #ccc;39.padding： 10px;40.text-align: left；41.｝42.43.。

四个漂亮CSS样式表

四个漂亮CSS 样式表1. 单像素的边框CSS 表格这是⼀个⾮常所⽤的表格风格。

源码：border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #ffffff;}</style><table class="gridtable"></table>2. 带背景图的CSS 样式表格和上⾯差点⼉相同，只是每⼀个格⼦⾥多了背景图。

cell-blue.jpgcell-grey.jpg 1. 下载上⾯两张图，命名为cell-blue.jpg 和cell-grey.jpg 2. 拷贝以下的代码到你想要的地⽅。

记得改动图⽚url }table.imagetable th { background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px; border-style: solid;border-color: #999999;}table.imagetable td {<tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr>3. ⾃⼰主动换整⾏颜⾊的CSS 样式表格（须要⽤到JS ）这个CSS 样式表格⾃⼰主动切换每⼀⾏的颜⾊，在我们须要频繁更新⼀个⼤表格的时候⾮常实⽤。

用CSS美化表格

运用CSS语法美化表格Table注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。

例一：1px表格很多人热衷于制作1px表格，于是发明了各式各样的方法，用css做起来可就灵活的多。

如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。

我们首先用Dreamweaver插入一个1x1表格，宽度为50，然后在该表格table或者td中定义border:1 solid teal,所做的表格的效果如下：但是要制作一个非1x1的表格（如2x2）就稍微麻烦些，因为如果直接定义td样式border:1 solid teal ，则显示的效果如下：你会发现表格外框为1px，而里面则变成了2px了，这是由于叠加的原因。

为了解决这么问题我们可以这样做：首先为td定义样式：border:#cc0000 solid;border-width:0 1 1 0,这样表格表现为：然后再为table定义样式:border:#cc0000 solid;border-width:1 0 0 1,这样就可做作成一个完整的1px表格了。

例二：粗边框的1px表格此表格的内格线为1px而外边框为3px，有了例一的基础做起来就不难了，只要修改border-width值就行了。

对table所使用的样式的代码是：border:blue solid;border-width:3 2 2 3对td所使用的样式的代码是：border:blue solid;border-width:0 1 1 0例三：虚线框表格做法和例一类似，border-style从solid改为dashed。

对table所使用的样式的代码是：border:black dashed;border-width:1 0 0 1 对td所使用的样式的代码是：border:black dashed;border-width:0 1 1 0例四：点线边框表格注意点线（dotted）的最小象素为2。

CSS Table 属性

CSS Table 属性属性 border-collapse border-spacing caption-side empty-cells table-layout 描述设置是否把表格边框合并为单线的边框。

设置分隔单元格边框的距离。

设置表格标题的位置。

设置是否显示表格中的空单元格。

设置显示单元、行和列的算法。

CSS 表格属性可以帮助您极大地改善表格的外观。

1. 表格边框如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框： table, th, td { border: 1px solid blue; } 亲自试一试请注意，上例中的表格具有双线条边框。

这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

2. 折叠边框border-collapse 属性设置是否将表格边框折叠为单一边框： table { border-collapse:collapse; } table,th, td { border: 1px solid black; } 亲自试一试3. 表格宽度和高度通过 width 和 height 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px： table { width:100%; } th { height:50px; } 亲自试一试4. 表格文本对齐text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中： td { text-align:right; } 亲自试一试 vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐： td { height:50px; vertical-align:bottom; } 亲自试一试5. 表格内边距如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性： td { padding:15px; } 亲自试一试6. 表格颜色下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色： table, td, th { border:1px solid green; } th { background-color:green; color:white; } 亲自试一试亲自试一试 - 更多实例制作一个漂亮的表格本例演示如何创造一个漂亮的表格。

用CSS_DIV画表格（table）进行网页排版【转】

⽤CSS_DIV画表格（table）进⾏⽹页排版【转】以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。

但是時代在进步，还在⽤table排⽹页感觉就有点过时了。

会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。

那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。

但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。

本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。

但是这回因为⽹页化，因此所有的CSS与DIV⼏乎是重构的状态，所以在本來的分类⽂章清单中，样式也順便进⾏重构，可是问题來了？「重构=花时间」，因为要⽤CSS+DIV模拟成table的样式，如果⼀直使⽤float來排版，校正上其实很⿇烦，当然在浏览器的校正上，更是头⼤。

后來找了⼀下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使⽤！传统的table排版的问题⼀般來讲，table打好语法就可以呈现效果了，⽽且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显⽰。

如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。

对于搜寻引擎來讲，他们抓⽹站內容通常不会⼀次抓完，会先抓到⼀定的⽹页⼤⼩，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了⼀些不重要的样式设定。

css中table用法

css中table用法CSS中的表格（table）是一种用于布局和展示数据的强大工具。

它可以用来创建各种复杂的布局，包括多列、多行、带有标题和脚注的表格等。

在CSS中，表格由元素`<table>`、`<tr>`、`<th>`和`<td>`组成。

其中，`<table>`表示整个表格，`<tr>`表示表格中的一行，`<th>`表示表头单元格，`<td>`表示普通单元格。

要创建一个基本的表格，可以使用以下代码：[code]html<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr><tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr></table>[/code]在这个例子中，我们创建了一个包含两行两列的表格。

第一行是表头，包含了两个单元格，第二行和第三行是普通单元格。

每个单元格都包含一些文本内容。

除了基本的表格结构外，CSS还提供了许多属性和样式来控制表格的外观和行为。

例如，我们可以使用`border`属性为表格添加边框，使用`background-color`属性为单元格添加背景色，使用`text-align`属性设置单元格内容的对齐方式等等。

表格表单css样式设计教案

一体化课程教案编号：QD-0707-05版本号：D/0 流水号：编制：教研室批准:成振洋2011/2012 学年度第二学期计算机系（部）任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数 6 授课日期2012.5.17 周次13 审批年月日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。

本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。

这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。

学习重点：分析并制作出网页表格、表单的样式表。

学习难点及其化解方法学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。

教学准备➢教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件➢教学准备：示例网页、素材图片、任务书教学内容（课时 6 ）：学习任务书教学任务一绘制交换颜色变化的表格【任务内容】讲解表格CSS样式表设置的方式方法【任务目的】使学生掌握表格样式，学会熟练设置表格边框、背景色、单元格间距等属性。

【学习重点】CSS样式表的灵活运用【学习难点】理解表格的各个属性、间距设置的意义【教学方式】案例分析式、任务教学【教学内容】一、制作4X5的表格，并输入相应的文字内容提示：没有特殊合并格式的表格，可以使用<table>、<tr>、<td>标签完成。

或直接用dw生成。

二、设置表格CSS样式1、设置table的样式为border-collapse:collapse;2、设置tbody、td的样式为color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bottom-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;3、设置两种颜色的表格单元格样式类分别为in\on，颜色可自行设计。

根据CSS附则13制定的专用系固计算表格

α 的函数，通过查表4得到。
5kN；MSL=100kN；环——破断强度180kN；MSL=90kN；接而成时（如钢丝绳连接卸扣再连接甲而言 0.56 0.63 0.71 0.78 0.85
注：对于表2中没有直接列出的船长与船速组合，修正系数通过下式求得： 2 系数=[（0.345×v)/√L]+[(58.62×L-1034.5)/L ] 式中：v——船速，kn L——垂线间长，m 上述公式不适用垂线间长小于50m或超过300m的船舶
纵向加速度a0x （m/s2 ）
6.7 6.7 6.8 6.1 6.1 6.1 5.4 5.4 5.5 5.0 5.0 5.1 0.4L 0.5L 0.6L 2 垂向加速度a0x（m/s ） 7.6 6.2 5 4.3 4.3 5 注：X为货物单元重心距A.P(尾垂线）的距离（m）。表2 L(m) V(kn) 9 12 15 18 21 24 50 1.20 1.34 1.49 1.64 1.78 1.93 60 1.09 1.22 1.36 1.49 1.62 1.76
3.8 2.9 2.0 1.5
与船长（L）和航速(V)有关的K1修正系数表 70 1.00 1.12 1.24 1.37 1.49 1.62 80 0.92 1.03 1.15 1.27 1.38 1.50 90 0.85 0.96 1.07 1.18 1.29 1.40 100 0.79 0.90 1.00 1.10 1.21 1.31 120 0.70 0.79 0.89 0.98 1.08 1.17 140 0.63 0.72 0.80 0.89 0.98 1.07 160 0.57 0.65 0.73 0.82 0.90 0.98 180 0.53 0.60 0.68 0.76 0.83 0.91

css设计表格圆角最简单的方法

css设计表格圆角最简单的方法【原创版3篇】篇1 目录I.圆角表格设计的概念II.圆角表格设计的实现方法III.圆角表格设计的优点IV.圆角表格设计的应用场景篇1正文一、圆角表格设计的概念圆角表格设计是一种通过CSS样式表来实现的表格设计，它通过添加圆角半径来使表格边框呈现圆弧形状，从而增加表格的美观度和可读性。

二、圆角表格设计的实现方法要实现圆角表格设计，可以使用CSS的border-radius属性来设置表格边框的圆角半径。

例如，以下CSS代码可以将表格边框设置为圆角：```csstable {border-radius: 10px;}```其中，10px是圆角半径的大小。

您可以根据需要调整圆角半径的大小。

三、圆角表格设计的优点1.提高可读性：圆角边框可以减少视觉干扰，提高阅读体验。

2.增加美观度：圆角边框可以使表格更加美观，增强页面的设计感。

3.适合响应式设计：圆角边框可以适应不同屏幕尺寸的设备，使表格在不同设备上都能呈现出良好的视觉效果。

四、圆角表格设计的应用场景1.博客文章：在博客文章中，可以使用圆角表格设计来增强文章的美观度和可读性。

2.电子商务网站：在电子商务网站中，可以使用圆角表格设计来提高产品的可读性和吸引力。

篇2 目录I.圆角表格设计的背景和目的II.圆角表格设计的实现方法III.圆角表格设计的优点和缺点IV.总结篇2正文一、圆角表格设计的背景和目的在网页设计中，表格是一种常用的布局工具，用于展示数据和结构。

然而，传统的表格设计往往显得单调和呆板，无法满足用户的审美需求。

为了改善这种情况，许多设计师开始尝试使用圆角来美化表格。

圆角的设计可以使表格更加立体、生动，提高用户体验。

二、圆角表格设计的实现方法要实现圆角表格设计，可以使用CSS中的border-radius属性。

这个属性可以用来设置元素的边框圆角。

例如，要将一个表格的四个角都设置为圆角，可以使用以下代码：```cssborder-radius: 10px;}```这个代码将表格的四个角都设置为10像素的圆角。

使用CSS把ul,li制作成表格

使⽤CSS把ul,li制作成表格查看效果：具体实现请看样式部分。

完整代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>使⽤CSS把ul,li制作成表格-何问起</title><base target="_blank"/><meta charset="utf-8"/><style>.hovertreeulli ul{list-style:none;width:300px;border:solid 1px gray;padding:0px}.hovertreeulli li{margin-left:0px;width:99%;border-bottom:1px dotted gray;text-align:center;line-height:30px}a{color:blue;text-decoration:none}</style></head><body><div><h2>何问起</h2><h3>使⽤CSS把ul,li制作成表格</h3></div><div class="hovertreeulli"><ul><li><a href="/">⾸页</a></li><li><a href="/map/">⽹站地图</a></li><li><a href="/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="/menu/texiao/">特效</a></li><li><a href="/">CMS在线预览</a></li><li><a href="/hvtart/bjae/74cc61ed089a2991.htm">jQuery图⽚列表⿏标经过遮罩显⽰⽂字</a></li> <li><a href="/hvtart/bjae/9gjkwp4f.htm">原⽂</a></li></ul></div></body></html>web前端：。

使用css制作表单

使用CSS制作表单（Form）表单是功能型网站中经常使用的元素，是网站交互中最重要的元素。

在网页中，小到搜索按钮，大到用户注册表单，以及用户控制面板，都需要使用到表单及其表单元素。

表单元素主要用来收集用户信息，帮助用户进行功能性控制，表单的交互设计与视觉设计都是网站设计中的重要部分。

本节将介绍如何使用CSS设计表单。

1.制作登录表单登录表单是各大网站都会用到的一个非常实用的模块，是用来进入其他相关页面的入口。

本节将使用form表单以及label标签制作一个样式精美的登录表单。

1.1 label标签语法结构<label for=”#” accesskey=”#”></label> Label标签具有提示表单含义的功能，是成堆出现的。

●for：表示label标签要绑定的XHTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。

<label for=”InputBox”>姓名</label><input id=”InputBox” type=”text”>●accesskey：表示访问label标签所绑定的元素的热键，当按下热键，所绑定的元素将获取焦点。

（热键：Alt+N）<label fo r=”InputBox” accesskey=”N”>姓名</label><input id=”InputBox” type=”text”>1.2 制作登录表单实例使用表单元素和label标签设计一个登录表单。

分成两个div层级关系，外层为layout层，用来定义表单框架样式，内层为member层，用来放置表单等主体元素。

内层member又分成标题区域和表单区域，分别为title和form控制样式。

2.制作用户注册表单表单布局除了需要应用表单中的各个元素之外，还需要使用到table表格，表格是表单布局的得力助手。

对于最终的表单来说，表格对数据的排列方式非常适合于表单元素的排列。

CSS布局-table表格布局

CSS布局-table表格布局table布局历史久远，现在已经很少使⽤，但是因为table本⾝的⼀些特性，⽐如上下对齐，左右对齐，⽂字默认居中使得table布局在处理⼀些规范的布局时还是很有⽤的，另外，通过table布局也正好可以学习⼀下table的使⽤⽅式。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.left{background:red;/* table布局中的元素默认等分width及height，如果需要设置不同的size,可以直接使⽤width单独设置，这样会⾃动布局 *//* width: 20%; */}.right{background:blue;}table{width:800px;height:200px;/* border-collapse属性设置表格的边框是否被合并为⼀个单⼀的边框，还是像在标准的HTML中那样分开显⽰ *//* separate：默认值，边框会分开 *//* collapse: 如果可能，边框会合并为单⼀的边框 */border-collapse: collapse;}.table{margin-top:20px;/* 设置其他元素为table元素，这样就可以在其他元素中使⽤table布局了。

3行3列表格table实现，div+css实现

3⾏3列表格table实现，div+css实现table实现：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>⽆标题⽂档</title></head><body><table width="446" height="236" border="1"><tr><td width="111" rowspan="2" ></td><td colspan="2"></td></tr><tr><td width="134"></td><td width="132"></td></tr><tr><td width="111"></td><td width="134"></td><td width="132"></td></tr></table></body></html>div+css实现：（少最后三列）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>⽆标题⽂档</title><style>#big{border:1px solid #000; width:500px; height:500px;}#bigleft{ border:1px solid #000;width:100px; height:200px; float:left;}#bigright{ border:1px solid #000;width:396px; height:200px; float:right;}#bigrightT{border:1px solid #000;width:396px; height:100px;}#bigrightB{border:1px solid #000;width:396px; height:96px;}#bigrightB1{border:1px solid #000;width:200px; height:96px;}#bigrightB1{border:1px solid #000;width:192px; height:96px;}#bigleft2{ border:1px solid #000;width:500px; height:300px; clear:both;}</style></head><body><div id="big"><div id="bigleft"></div><div id="bigright"><div id="bigrightT"></div><div id="bigrightB"><div id="bigrightB1"></div><div id="bigrightB2"></div></div></div><div id="bigleft2"></div></div></body></html>----------------------------------------------------------------------------id对应的是#class对应的是.-----------------------------------------------------题：⼀个div在另外⼀个div中<!doctype html><html><head><meta charset="utf-8"><title>⽆标题⽂档</title><style type="text/css">#one{margin-left:160px;background-color:#F00;width:260px;height:240px;}#two{margin-right:10px;background-color:#FF0;width:210px;height:140px;margin-top:150px;margin-left:1px;} </style></head><body><div id="one"><div id="two"></div></div></body></html>。

CSSdisplay属性的table表格布局

CSSdisplay属性的table表格布局项⽬改造中遇到DIV+CSS实现的table，新需求需要在表格使⽤单元格合并，⽹上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过⼀番思考，曲折现实了单元格的合并，即采⽤正⾏嵌套⼀个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制⾏列数和⾏列的⾼度，实现单元格合并。

个⼈建议全新实现使⽤<table> HTML标签即可⼀、CSS display属性的表格布局相关属性的解释：table 此元素会作为块级表格来显⽰（类似 <table>），表格前后带有换⾏符。

table-row-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 <tbody>）。

table-header-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 <thead>）。

table-footer-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 <tfoot>）。

table-row 此元素会作为⼀个表格⾏显⽰（类似 <tr>）。

table-column-group 此元素会作为⼀个或多个列的分组来显⽰（类似 <colgroup>）。

table-column 此元素会作为⼀个单元格列显⽰（类似 <col>）table-cell 此元素会作为⼀个表格单元格显⽰（类似 <td> 和 <th>）table-caption 此元素会作为⼀个表格标题显⽰（类似 <caption>）⼆、⽰例代码1、普通表格XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>display普通表格</title>6. <style type="text/css">7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}8. .table {display: table; width: 80%; border-collapse: collapse;}9. .table-tr {display: table-row; height: 30px;}10. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}11. .table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}12. </style>13. </head>14. <body>15. <div class="table">16. <div class="table-tr">17. <div class="table-th">省份/直辖市</div>18. <div class="table-th">GDP(亿元)</div>19. <div class="table-th">增长率</div>20. </div>21. <div class="table-tr">22. <div class="table-td">⼴东</div>23. <div class="table-td">72812</div>24. <div class="table-td">8.0%</div>25. </div>26. <div class="table-tr">27. <div class="table-td">河南</div>28. <div class="table-td">37010</div>29. <div class="table-td">8.3%</div>30. </div>31. <div class="table-tr">32. <div class="table-td">江苏</div>33. <div class="table-td">70116</div>34. <div class="table-td">8.5%</div>35. </div>36. </div>37. </body>38. </html>运⾏效果2、列合并实现表格实现思路：基于display:table的表格实现，没有<table>的rowspan和colspan单元格合并的实现，所以曲折实现，将表格每⾏单独嵌套⼀个独⽴的表格，这样在嵌套的独⽴表格内部，单元格合并就能通过控制嵌套表格的⾏数和列数以及单元格的宽⾼来实现XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>基于display列合并表格</title>6. <style type="text/css">7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}8. .table {display: table; width: 80%; border-collapse: collapse;}9.10. .table-tr {display: table-row; height: 30px;}11. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}12. .table-td {display: table-cell; height: 100%;}13.14. .sub-table {width: 100%;height: 100%;display: table;}15. .sub-table-tr {display: table-row; height: 100%;}16. .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}17.18. </style>19. </head>20. <body>21.22. <div class="table">23. <div class="table-tr">24. <div class="table-td">25. <div class="sub-table">26. <div class="sub-table-tr">27. <div class="table-th" style="width: 40%;">省份／直辖市</div>28. <div class="table-th" style="width: 30%;">GDP(亿元)</div>29. <div class="table-th" style="width: 30%;">增长率</div>30. </div>31. </div>32. </div>33. </div>34. <div class="table-tr">35. <div class="table-td">36. <div class="sub-table">37. <div class="sub-table-tr">38. <div class="sub-table-td" style="width: 40%;">⼴东</div>39. <div class="sub-table-td" style="width: 30%;">72812</div>40. <div class="sub-table-td" style="width: 30%;">8.0%</div>41. </div>42. </div>43. </div>44. </div>45. <div class="table-tr">46. <div class="table-td">47. <div class="sub-table">48. <div class="sub-table-tr">49. <div class="sub-table-td" style="width: 40%;">河南</div>50. <div class="sub-table-td" style="width: 30%;">37010</div>51. <div class="sub-table-td" style="width: 30%;">8.3%</div>52. </div>53. </div>54. </div>55. </div>56. <div class="table-tr">57. <div class="table-td">58. <div class="sub-table">59. <div class="sub-table-tr">60. <div class="sub-table-td" style="width: 40%;">江苏</div>61. <div class="sub-table-td" style="width: 30%;">70116</div>62. <div class="sub-table-td" style="width: 30%;">8.5%</div>63. </div>64. </div>65. </div>66. </div>67. <div class="table-tr">68. <div class="table-td">69. <div class="sub-table">70. <div class="sub-table-tr">71. <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>72. <div class="sub-table-td" style="width: 30%;">8.26%</div>73. </div>74. </div>75. </div>76. </div>77. </div>78. </body>79. </html>运⾏效果3、⾏合并表格⾏合并的实现思路：与列合并的实现思路类似，将有单元格合并的列单独嵌套⼀个display为table的DIV，⾼度=单⾏⾼*单元格合并数⽬的倍数，同⾏的其他列同样均单独嵌套DIV，实例代码如下XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>基于display的⾏合并表格</title>6. <style type="text/css">7. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}8. .table {display: table; width: 80%; border-collapse: collapse;}9.10. .table-tr {display: table-row; height: 30px;}11. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}12. .table-td {display: table-cell; height: 100%;}13.14. .sub-table {width: 100%;height: 100%;display: table;}15. .sub-table-tr {display: table-row; height: 100%;}16. .sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}17.18. </style>19. </head>20. <body>21.22. <div class="table">23. <div class="table-tr">24. <div class="table-td">25. <div class="sub-table">26. <div class="sub-table-tr">27. <div class="table-th" style="width: 40%;">省份／直辖市</div>28. <div class="table-th" style="width: 30%;">GDP(亿元)</div>29. <div class="table-th" style="width: 30%;">增长率</div>30. </div>31. </div>32. </div>33. </div>34. <div class="table-tr">35. <div class="table-td">36. <div class="sub-table">37. <div class="sub-table-tr">38. <div class="sub-table-td" style="width: 40%;">⼴东</div>39. <div class="sub-table-td" style="width: 30%;">72812</div>40. <div class="sub-table-td" style="width: 30%;">8.0%</div>41. </div>42. </div>43. </div>44. </div>45. <div class="table-tr" style="height:60px;">46. <div class="table-td">47. <div class="sub-table">48. <div class="sub-table-tr">49. <div class="sub-table-td" style="width: 40%; border: none;">50. <div class="sub-table">51. <div class="sub-table-tr" style="height:50%;">52. <div class="sub-table-td" style="width: 100%; height:50%;">53. 河南54. </div>55. </div>56. <div class="sub-table-tr" style="height:50%;">57. <div class="sub-table-td" style="width: 100%; height:50%;">58. 江苏59. </div>60. </div>61. </div>62. </div>63. <div class="sub-table-td" style="width: 30%;border: none;">64. <div class="sub-table">65. <div class="sub-table-tr" style="height:50%;">66. <div class="sub-table-td" style="width: 100%; height:50%;">67. 3701068. </div>69. </div>70. <div class="sub-table-tr" style="height:50%;">71. <div class="sub-table-td" style="width: 100%; height:50%;">72. 7011673. </div>74. </div>75. </div>76.77. </div>78.79. <div class="sub-table-td" style="width: 30%;border: none;">80. <div class="sub-table">81. <div class="sub-table-tr">82. <div class="sub-table-td" style="width: 100%;">83. 8.4%84. </div>85. </div>86. </div>87. </div>88. </div>89. </div>90. </div>91. </div>92. <div class="table-tr">93. <div class="table-td">94. <div class="sub-table">95. <div class="sub-table-tr">96. <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>97. <div class="sub-table-td" style="width: 30%;">8.26%</div>98. </div>99. </div>100. </div>101. </div>102. </div>103. </body>104. </html>运⾏效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。

CSS设置表格与表单样式

15
实例：
1. 2. 3.
表单元素文件Sample6-7.html 彩色的下拉菜单综合实例—模仿新浪网民调查问卷(文件 Sample6-9.html)
16
2
6.1.1 表格模型
<thead>用于指定表格标题行，如果打印的表格超过一页纸，
<thead>应该在每个页面顶端出现。 <tbody>表格正文部分，将相关行集合在一起。一个表格可以有一个或多个<tbody>部分。 <tfood>是表格标题行的低端补充，它是一组作为脚注的行，如果表格横跨多个页面，也应该重复。他们不但用于网页的分块显示，还能用来做表格的分页打印，就是表格自动分页的时候每页都带表头thead和表底tfoot。例如：
9
6.1.2表格的颜色

表格颜色的设置与文字颜色的设置完全一样，通过color属性设置表格中文字的颜色，通过 background属性设置表格的背景颜色。如文件Sample6-2.html所示：
10
6.1.3表格的边框

在CSS中设置边框同样是通过border属性，设置方法跟图像的边框完全一样，只不过在表格中需要特别注意单元格之间的关系，需要为单元格也单独设置相应的边框。如文件Sample6-3.html所示：
13
CSS与表单
HTML标签 <button> 功能创建Reset、Submit或者其他可编程下压按钮
<fieldset>
<input type=”button”> <input type=”checkbox”> <input type=”file”> <input type=”hidden”> <input type=”image”>