目录
[1]表格 border-collapse table-layout [2]行 [3]列 [4]其他表格元素 [5]display [6]匿名表格对象 [7]表格层void | 不显示外侧边框。 |
above | 显示上部的外侧边框。 |
below | 显示下部的外侧边框。 |
hsides | 显示上部和下部的外侧边框。 |
vsides | 显示左边和右边的外侧边框。 |
lhs | 显示左边的外侧边框。 |
rhs | 显示右边的外侧边框。 |
box | 在所有四个边上显示外侧边框。 |
border | 在所有四个边上显示外侧边框。 |
【7】rules(IE7-浏览器不能正常显示)
none | 没有线条。 |
groups | 位于行组和列组之间的线条。 |
rows | 位于行之间的线条。 |
cols | 位于列之间的线条。 |
all | 位于行和列之间的线条。 |
点击下列相应属性值可进行演示
【样式】
【1】border-spacing[可替代HTML属性cellspaing](IE7-不支持)
[注意]只有当border-collapse值为separate时,该样式才有效
border-spacing: x y//x:水平间距 y:垂直间距。若只有一个值,则水平间距和垂直间距相等。注意,不可为负值。
【2】empty-cells(IE7-不支持)
empty-cells: hide 不在空单元格周围绘制边框和背景,类似于hidden效果empty-cells: show(默认) 在空单元格周围绘制边框和背景
【3】border-collapse
CSS实际上有两种截然不同的边框模型。按布局术语来说,如果单元格相互之间是分隔的,是分隔边框模型在起作用;另一种是合并边框模型,单元格边框会相互合并。
border-collapse:separate;
[注意]在分隔边框模型中,不能为行、行组、列和列组设置边框。
border-collapse:collapse;
[注意1]在合并边框模型中,表格不能有内边距,且单元格边框之间也没有间距。单元格之间的边框会在单元格间的假想表格线上居中。
[注意2]在合并边框模型中,表格宽度只包含表格边框的一半。
【边框合并的规则】
【a】某个合并边框的border-style为hidden,它会优先于所有其他合并边框。这个位置上的所有边框都隐藏
【b】某个合并边框的border-style为none,它的优先级最低
【c】宽边框优先于窄边框
【d】若宽度相同,double\solid\dashed\dotted\ridge\outset\groove\inset,优先级逐渐降低
【e】若样式也相同,cell\row\row group\column\column group\table,优先级逐渐降级
点击下列相应属性值可进行border-style的演示
【4】table-layout
table-layout:auto//自动宽度布局
【自动布局的步骤】
【a】对于一列中的单元格,计算最小和最大单元格宽度
【b】对于各一列,计算最小和最大列宽
【c】若单元格跨列,最小列宽之和要等于跨列单元格最小单元格宽度
table-layout:fixed//固定宽度布局
【固定布局的步骤】
【a】width属性值不是auto的所有列元素会根据width值设置该列的宽度
【b】如果一个列的宽度为auto,则根据该单元格设置此列宽度,如果跨多列,则宽度平均分配
【c】如果列宽度仍为auto,则自动确定其大小,使其宽度尽可能相等
[注意]使用固定宽度布局,用户代理可以更快地计算出表格的布局
【5】vertical-align
vertical-align: top;//顶端对齐vertical-align: bottom;//底端对齐vertical-align: middle;//中间对齐vertical-align: baseline(默认);//基线对齐
[注意]vertical-align:sub\super\text-top\text-bottom应用到表格单元格时会被忽略
行
【
<tr>行 table row <th>表头 table head <td>表格数据 table data
【属性】
【1】colspan
规定单元格可横跨的列数
【2】rowspan
规定单元格可横跨的行数
[注意1]关于行的表格元素生成矩形框,这些框有内容、内边距和边框,但是没有外边距margin
[注意2]表头呈现为居中的粗体文本
点击下列相应属性值可进行演示
列
【
为表格中一个或多个列定义属性值
对表格中的列进行组合,以便对其进行格式化
【属性】
【1】span
规定col元素应该横跨的列数
【样式】
【1】visibility:collapse
该列或列组的所有单元格不显示(设置为其他值则无效)
【2】border
只有当border-collapse:collapse时,才能设置border
【3】background
只有当单元格及其行有透明背景时,列或列组的背景才可见
【4】width
定义列或列组的最小宽度
<table border="1" style="border-collapse: collapse"> <colgroup span="2" style="width:100px; background-color: red"></colgroup> <col style="background-color: green; width:200px; border: 3px solid blue;" > <tr> <td>数字</td> <td>中文</td> <td>英文</td> </tr> <tr> <td>1</td> <td>一</td> <td>a</td> </tr> <tr> <td>2</td> <td>二</td> <td>b</td> </tr></table>
其他表格元素
【
<thead>表格页眉<tbody>表格主体<tfoot>表格页脚
[注意]它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚
【
【样式】
caption-side: top(默认)caption-side: bottom
[注意]

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

WebStorm Mac版
好用的JavaScript开发工具

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

禅工作室 13.0.1
功能强大的PHP集成开发环境