搜索
首页web前端html教程深入理解表格_html/css_WEB-ITnose

目录

[1]表格 border-collapse table-layout [2]行 [3]列 [4]其他表格元素 [5]display [6]匿名表格对象 [7]表格层

表格

【属性】

  【1】border

border="0"//没有边框border="8"//8像素宽的边框

  【2】cellpadding(px/%)

      规定单元边界与单元内容之间的间距

  【3】cellspacing(px/%)

      规定单元格之间的间距

  【4】summary

      表格内容的摘要

  【5】width

      表格宽度      

<table border="2" cellpadding="5" cellspacing="3" summary="测试表格" width="300">    <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>    

  【6】frame(IE7-浏览器不能正常显示)

值 描述
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]表头呈现为居中的粗体文本

   点击下列相应属性值可进行演示

 

  

-> column 列

    为表格中一个或多个列定义属性值

  

-> column group 列组

    对表格中的列进行组合,以便对其进行格式化

【属性】

【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

  [注意]

标签必须紧随标签之后,且只能对每个表格定义一个标题

<table border="1" >  <caption style="caption-side:bottom">北京天气</caption>  <thead>    <tr>      <th>地区</th>      <th>天气</th>    </tr>  </thead>  <tfoot>    <tr>      <td>北京</td>      <td>都雾霾</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>城八区</td>      <td>雾霾</td>    </tr>    <tr>      <td>郊区</td>      <td>雾霾</td>    </tr>  </tbody></table>

 

display

table{display: table;}thead{display: table-header-group;}tbody{display: table-row-group;}tfoot{display: table-footer-group;}tr{display: table-row;}td,th{display: table-cell;}col{display: table-column;}colgroup{display: table-column-group;}caption{display: table-caption;}

    [注意]IE7-浏览器不支持为HTML元素设置与表格有关的display值

 

匿名表格对象

  CSS定义了一种机制,将遗漏的组件作为匿名对象插入。详细插入规则如下:

  【1】如果table-cell元素的父元素不是table-row元素,则插入匿名table-row对象

  【2】如果table-row元素的父元素不是table、inline-table或table-row-group元素,则插入匿名table元素

  【3】如果table-column元素父元素不是table、inline-table或table-row-group元素,则插入匿名table元素

  【4】如果table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父元素不是table元素,则插入匿名table元素

  【5】如果table元素或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption,则插入匿名table-row元素

  【6】如果table-row-group、table-header-group、table-footer-group元素的子元素不是table-row元素,则插入匿名table-row元素

  【7】如果table-row元素的子元素不是table-cell元素,则插入匿名tabel-cell元素

 

表格层

   CSS定义了6个不同的层,对应表各个方面的样式都在其各自的层上绘制。默认地,所有元素背景都是透明的,如果单元格、行、列等没有自己的背景,则table元素的背景将透明这些内部元素可见。

  点击下列相应属性值可进行演示

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

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

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

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

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

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

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

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

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

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

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

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

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

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

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

DVWA

DVWA

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

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境