有什么做网站的国企,网站建设语言,dedecms做网站,网站设计师工资一般多少在网页设计中#xff0c;表格主要用于显示包含行、列结构的二维数据#xff0c;如财务表格、调查数据、日历表、时刻表、节目表等。在大多数情况下#xff0c;这类信息都由列标题或行标题及数据构成。本章将详细介绍表格在网页设计中的应用#xff0c;包括设计符合标准化的…在网页设计中表格主要用于显示包含行、列结构的二维数据如财务表格、调查数据、日历表、时刻表、节目表等。在大多数情况下这类信息都由列标题或行标题及数据构成。本章将详细介绍表格在网页设计中的应用包括设计符合标准化的表格结构以能够正确设置表格属性。
1、新建表格
1.1、定义普通表格
使用table元素可以定义HTML表格。简单的HTML表格由一个table元素以及一个或多个tr和td元素组成其中tr元素定义表格行td元素定义表格的单元格。
【示例】设计一个简单的HTML表格包含两行两列演示效果如下图所示 articleh1《春晓》/h1tabletrtd春眠不觉晓/tdtd处处闻啼鸟。/td/trtrtd夜来风雨声/tdtd花落知多少。/td/tr/table/article1.2、定义列标题
在HTML表格中有以下两种类型的单元格
表头单元格包含表头信息由th元素创建。标准单元格包含数据由td元素创建。
在默认状态下th元素内部的文本呈现为居中、粗体显示而td元素内部通常是左对齐的普通文本。在HTML中使用th元素定义列标题单元格。
【示例1】设计一个含有表头信息的HTML表格包含两行两列演示效果如下图所示 tabletrth用户名/thth电子邮箱/th/trtrtd张三/tdtdzhangsan163.com/td/tr/table【示例2】设计了一个简单的课程表表格中包含行标题和列标题即表格被定义了2类表头单元格演示效果如下图所示。 tabletrthnbsp;/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/th/trtrth第1节/thtd语文/tdtd物理/td td数学/tdtd语文/td td美术/td/trtrth第2节/thtd数学/tdtd语文/td td体育/td td英语/tdtd音乐/td/trtrth第3节/thtd语文/tdtd体育/tdtd数学/tdtd英语/tdtd地理/td/trtrth第4节/thtd地理/tdtd化学/td td语文/tdtd语文/tdtd美术/td/tr/table1.3、定义表格标题
有时需要为表格添加一个标题。使用caption元素可以定义表格标题。注意caption元素必须紧随table元素且每个表格只能定义一个标题。
【示例】为表格添加一个标题演示效果如下图所示 tablecaption通讯录/captiontrth用户名/thth电子邮箱/th/trtrtd张三/tdtdzhangsan163.com/td/tr/table可以看到在默认状态下标题位于表格上面呈居中显示。
提示在HTML4中可以使用align属性设置标题的对齐方式取值包括left、right、top、bottom。在HTML5中已不建议使用可使用CSS样式取而代之。
1.4、表格行分组
thead、tfoot和tbody元素可以对表格中的行进行分组。在创建表格时如果有一个标题行、一些带有数据的行以及位于底部的一个总计行这样就可以设计独立于表格标题和页脚的表格正文滚动了。当长的表格被打印时表格的表头和页脚可以被打印在包含表格数据的每张页面上。
使用thead元素可以定义表格的表头该标签用于组合HTML表格的表头内容一般与tbody和tfoot元素结合起来使用。其中tbody元素用于对HTML表格中的主体内容进行分组而tfoot元素用于对HTML表格中的表注页脚内容进行分组。
【示例】下面使用各种表格标签设计一个符合标准的表格结构代码如下所示 style typetext/csstable { width: 100%; }caption { font-size: 24px; margin: 12px; color: blue; }th, td { border: solid 1px blue; padding: 8px; }tfoot td { text-align: right; color: red; }/styletablecaption结构化表格标签/captiontheadtrth标签/thth说明/th/tr/theadtfoottrtd colspan2* 在表格中上述标签属于可选标签。/td/tr/tfoottbodytrtdthead/td td定义表头结构。/td/trtrtdtbody/tdtd定义表格主体结构。/td/trtrtdtfoot/tdtd定义表格的页脚结构。/td/tr/tbody/table在上面示例代码中可以看到是放在和之间的而最终在浏览器中会发现中的内容显示在表格底部。在标签中有一个colspan属性该属性的主要功能是横向合并单元格将表格底部的两个单元格合并为一个单元格示例效果如下图所示。 注意当使用thead、tfoot和tbody元素时必须使用全部的元素排列次序是thead、tfoot、tbody这样浏览器就可以在收到所有数据前呈现页脚且这些元素必须在table元素内部使用。
1.5、表格列分组
col和colgroup元素可以对表格中的列进行分组。其中使用col标签可以为表格中一个或多个列定义属性值。如果需要对全部列应用样式col标签很有用这样就不需要对各个单元格和各行重复应用样式了。
【示例1】使用col元素为表格中的三列设置不同的对齐方式效果如下图所示 table width100% border1col alignleft /col aligncenter /col alignright /trtd慈母手中线/tdtd游子身上衣。/tdtd临行密密缝/td/trtrtd意恐迟迟归。/tdtd谁言寸草心/tdtd报得三春晖。/td/tr/table在上面示例中使用3个col元素为表格中三列分别定义不同的对齐方式。这里使用HTML标签属性align设置对齐方式取值包括right右对齐、left左对齐、center居中对齐、justify两端对齐和char对准指定字符。由于浏览器支持不统一不建议使用align属性。
提示只能在table或colgroup元素中使用col元素。col元素是仅包含属性的空元素不能够包含任何信息。如要创建列就必须在tr元素内嵌入td元素。
使用colgroup标签也可以对表格中的列进行组合以便对其进行格式化。如果需要对全部列应用样式colgroup标签很有用这样就不需要对各个单元格和各行重复应用样式了。
【示例2】使用colgroup元素为表格中每列定义不同的宽度效果如下图所示。 style typetext/css.col1 { width:25%; color:red; font-size:16px; }.col2 { width:50%; color:blue; }/styletable width100% border1colgroup span2 classcol1/colgroupcolgroup classcol2/colgrouptrtd慈母手中线/tdtd游子身上衣。/tdtd临行密密缝/td/trtrtd意恐迟迟归。/tdtd谁言寸草心/tdtd报得三春晖。/td/tr/table注意colgroup标签只能在table元素中使用。
为列分组定义样式时建议为colgroup或col标签添加class属性然后使用CSS类样式定义列的对齐方式、宽度和背景色等样式。
【示例3】从示例1和示例2可以看到colgroup和col标签具有相同的功能同时也可以把col标签嵌入colgroup标签中使用。 table width100% border1colgroupcol span2 classcol1 /col classcol2 //colgrouptrtd慈母手中线/tdtd游子身上衣。/tdtd临行密密缝/td/trtrtd意恐迟迟归。/tdtd谁言寸草心/tdtd报得三春晖。/td/tr/table如果没有对应的col元素列会从colgroup元素继承所有的属性值。 提示span是colgroup和col标签的专用属性规定列组应该横跨的列数取值为正整数。例如在一个包含6列的表格中第一组有4列第二组有2列这样的表格在列上进行分组如下所示。 colgroup span4/colgroupcolgroup span2/colgroup浏览器将表格的单元格合成列时会将每行前四个单元格合成第一个列组将接下来的两个单元格合成第二个列组。这样colgroup标签的其他属性就可以用于该列组包含的列中了。
如果没有设置span属性则每个colgroup或col标签代表一列按顺序排列。
注意现代浏览器都支持colgroup和col标签但是Firefox、Chrome和Safari浏览器仅支持col和colgroup元素的span和width属性。也就是说用户只能够通过列分组为表格的列定义统一的宽度另外也可以定义背景色但是其他CSS样式不支持。虽然IE支持但是不建议用户应用它。通过示例2用户也能够看到CSS类样式中的color:red;和font-size:16px;都没有发挥作用。
【示例4】下面定义几个类样式然后分别应用到列标签中显示效果如下图所示 style typetext/csstable { /* 表格默认样式 */border:solid 1px #99CCFF;border-collapse:collapse;}.bg_th { /* 标题行类样式 */background:#0000FF;color:#fff;}.bg_even1 { /* 列1类样式 */background:#CCCCFF;}.bg_even2 { /* 列2类样式 */background:#FFFFCC;}/styletablecaptionIE浏览器发展大事记/captioncolgroupcol classbg_even1 idverson /col classbg_even2 idpostTime /col classbg_even1 idOS //colgrouptr classbg_thth版本/thth发布时间/thth绑定系统/th/tr……/table2、设置table属性
表格标签包含大量属性其中大部分属性都可以使用CSS属性代替使用也有几个专用属性无法使用CSS实现。HTML5支持的标签属性说明如下表所示 2.1、定义单线表格
rules和frame是两个特殊的表格样式属性用于定义表格的内、外边框线是否显示。由于使用CSS的border属性可以实现相同的效果所以不建议用户选用。
【示例】借助表格标签的frame和rules属性定义表格以单行线形式显示。 table border1 framehsides rulesrows width100%captionframe属性取值说明/captiontrth值/thth说明/th/trtrtdvoid/tdtd不显示外侧边框。/td/trtrtdabove/tdtd显示上部的外侧边框。/td/trtrtdbelow/tdtd显示下部的外侧边框。/td /trtrtdhsides/tdtd显示上部和下部的外侧边框。/td/trtrtdvsides/tdtd显示左边和右边的外侧边框。/td/trtrtdlhs/tdtd显示左边的外侧边框。/td/trtrtdrhs/tdtd显示右边的外侧边框。/td/trtrtdbox/td td在所有四个边上显示外侧边框。/td/trtrtdborder/tdtd在所有四个边上显示外侧边框。/td/tr/table上面示例通过frame属性定义表格仅显示上、下框线使用rules属性定义表格仅显示水平内边线从而设计出单行线数据表格效果。在使用frame和rules属性时同时定义border属性指定数据表显示边框线。在浏览器中预览显示效果如下图所示。
2.2、定义分离单元格
cellpadding属性用于定义单元格边沿与其内容之间的空白cellspacing属性用于定义单元格之间的空间这两个属性的取值单位为像素(px)或者百分比。
【示例】设计井字形状的表格。 table border1 framevoid cellpadding6 cellspacing16captionrules属性取值说明/captiontrth值/thth说明/th/trtrtdnone/tdtd没有线条。/td/trtrtdgroups/tdtd位于行组和列组之间的线条。/td/trtrtdrows/tdtd位于行之间的线条。/td/trtrtdcols/tdtd位于列之间的线条。/td/trtrtdall/tdtd位于行和列之间的线条。/td/tr/table上面示例通过frame属性隐藏表格外框然后使用cellpadding属性定义单元格内容的边距为6px单元格之间的间距为16px在浏览器中的预览效果如下图所示。 提示cellpadding属性定义的效果可以使用CSS的padding样式属性代替建议不要直接使用cellpadding属性。
2.3、定义细线边框
使用table标签的border属性可以定义表格的边框粗细取值单位为像素。当值为0时表示隐藏边框线。
【示例】如果直接为标签设置border“1”则表格呈现的边框线效果如下图所示。下面配合使用border和rules属性设计细线表格。 table border1 width100%captionrules属性取值说明/captiontrth值/thth说明/th/trtrtdnone/tdtd没有线条。/td/trtrtdgroups/tdtd位于行组和列组之间的线条。/td/trtrtdrows/tdtd位于行之间的线条。/td/trtrtdcols/tdtd位于列之间的线条。/td/trtrtdall/tdtd位于行和列之间的线条。/td/tr/tabletable border1 rulesall width100%captionrules属性取值说明/captiontrth值/thth说明/th/trtrtdnone/tdtd没有线条。/td/trtrtdgroups/tdtd位于行组和列组之间的线条。/td/trtrtdrows/tdtd位于行之间的线条。/td/trtrtdcols/tdtd位于列之间的线条。/td/trtrtdall/tdtd位于行和列之间的线条。/td/tr/table2.4、添加表格说明
使用table标签的summary属性可以设置表格内容的摘要该属性的值不会显示但是屏幕阅读器可以利用该属性也方便计算机进行表格内容检索。
【示例】使用summary属性为表格添加一个简单的说明以方便搜索引擎检索。 table border1 rulesall width100% summaryrules属性取值说明trth值/thth说明/th/trtrtdnone/tdtd没有线条。/td/trtrtdgroups/tdtd位于行组和列组之间的线条。/td/trtrtdrows/tdtd位于行之间的线条。/td/trtrtdcols/tdtd位于列之间的线条。/td/trtrtdall/tdtd位于行和列之间的线条。/td/tr/table3、设置td和th属性
单元格标签td和th包含大量属性其中大部分属性都可以使用CSS属性代替使用也有几个专用属性无法使用CSS实现。HTML5支持的td和th标签属性说明如下表所示。
3.1、定义跨单元格显示
colspan和rowspan是两个重要的单元格属性分别定义单元格可跨列或跨行显示取值为正整数。取值为0时表示浏览器横跨到列组的最后一列或者行组的最后一行。
【示例】使用colspan5属性定义单元格跨列显示效果如下图所示。 table border1trth aligncenter colspan5课程表/th/trtrth星期一/thth星期二/th th星期三/thth星期四/thth星期五/th/trtrtd aligncenter colspan5上午/td/trtrtd语文/tdtd物理/td td数学/td td语文/tdtd美术/td/trtrtd数学/tdtd语文/tdtd体育/td td英语/tdtd音乐/td/trtrtd语文/td td体育/tdtd数学/tdtd英语/tdtd地理/td/trtrtd地理/tdtd化学/tdtd语文/td td语文/tdtd美术/td/trtrtd aligncenter colspan5下午/td/trtrtd作文/tdtd语文/tdtd数学/tdtd体育/tdtd化学/td/trtrtd生物/tdtd语文/tdtd物理/tdtd自修/tdtd自修/td/tr/table3.2、定义表头单元格
使用scope属性可以将单元格与表头单元格联系起来。其中属性值row表示将当前行的所有单元格和表头单元格绑定起来属性值col表示将当前列的所有单元格和表头单元格绑定起来属性值rowgroup表示将单元格所在的行组由thead、tbody或tfoot标签定义和表头单元格绑定起来属性值colgroup表示将单元格所在的列组由col或colgroup标签定义和表头单元格绑定起来。
【示例】将两个th元素标识为列的表头将两个td元素标识为行的表头。 table border1trth/thth scopecol月份/thth scopecol金额/th/trtrtd scoperow1/tdtd9/tdtd$100.00/td/trtrtd scoperow2/tdtd4/tdtd$10.00/td/tr/table3.3、为单元格指定表头
使用headers属性可以为单元格指定表头该属性的值是一个表头名称的字符串这些名称是用id属性定义的不同表头单元格的名称。
headers属性对非可视化的浏览器也就是在显示出相关数据单元格内容之前就显示表头单元格内容的浏览器非常有用。
【示例】分别为表格中不同的数据单元格定义表头演示效果如下图所示。 table border1 width100%trth idname姓名/thth idemail电子邮件/thth idPhone电话/thth idAddress地址/th/trtrtd headersname张三/tdtd headersemailzhangsan163.com/tdtd headersPhone13522228888/tdtd headersAddress北京长安街38号/td/tr/table3.4、定义信息缩写
使用abbr属性可以为单元格中的内容定义缩写版本。abbr属性不会在Web浏览器中产生任何视觉效果方面的变化主要为计算机检索服务。
【示例】演示如何在HTML中使用abbr属性。 table border1trth名称/thth说明/th/trtrtd abbrHTMLHyperText Markup Language/tdtd超级文本标记语言/td/trtrtd abbrCSSCascading Style Sheets/tdtd层叠样式表/td/tr/table3.5、单元格分类
使用axis属性可以对单元格进行分类用于对相关的信息列进行组合。在一个大型数据表格中表格里通常填满了数据通过分类属性axis浏览器可以快速地检索特定信息。
axis属性的值是引号包括的一列类型的名称这些名称可以形成一个查询。例如在一个食物购物的单元格中使用axismeals浏览器能够找到单元格并获取它的值从而计算出总数。目前还没有浏览器支持该属性。
【示例】使用axis属性为表格中的每列数据进行分类。 table border1 width100%trth axisname姓名/thth axisemail电子邮件/thth axisPhone电话/thth axisAddress地址/th/trtrtd axisname张三/tdtd axisemailzhangsan163.com/tdtd axisPhone13522228888/tdtd axisAddress北京长安街38号/td/tr/table
