HTML中的表格是由
标签进行定义的,表格在HTML中的表现形式与使用方法与word中的表格非常类似。多数情况使用Dreamweaver的可视化视图只做表格更为简单、方便。本文主要讲述如何使用代码来编写表格,让大家掌握表格的代码书写格式与其对应的属性。
表格的标签组成
HTML中的表格是由
为主体标签,浏览器会将该标签解释为一个表格。表格中的行使用
标签进行定义。 标签为 标签的子类,设置若干个
标签可以将表格分割为若干个行。 标签用于定义表格的列, 标签为又是 标签的子类,因此每个行都需要设置相应数量的 和很少被用到,这是由于浏览器对它们的支持不太好。标签来分割列,形成一个完整的表格。 表格的标签组合关系为:
我是单元格1 我是单元格2 表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签,甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局,除非页面中确实需要一张表格。
剩下的
、、 表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度,该属性的值默认是以数字单位进行显示,例如border=”1″该值的单位为px。注意,不要在border的数值后面加上任何单位,否该值无法正确识别。
表格的表头
在
中可以通过
标签设置表头,表头的 标签与 标签属于平级,并且表头一般出现在 标签的前面。对于一个表格来说,表头并不是必须的,可以根据需要插入表头。 标签内的文字会被自动加粗。 单元格的合并
单元格的合并分为垂直合并与水平合并,在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性,其值是用数字的形式确定需要合并的单元格数量,例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性,与水平合并的属性相同,同样也是以数字形式确定需要合并的单元格数量,例如rowspan=”2″代表向下合并两个单元格。
实例演示代码:
姓名 电话 Bill Gates 555 77 854 555 77 855 横跨两行的单元格:
姓名 Bill Gates 电话 555 77 854 555 77 855 单元格边距
表格具有与padding样式类似的内边距功能。通过在
标签内定义cellpadding属性,来为其标签下的所有
元素设置内边距。cellpadding属性的参数是值是以数字的形式来确定边距的大小,例如cellpadding=”10″ 则表示table中的所有 标签内边距为10px 单元格间距
单元格的间距是设置
标签的外边距,这个也与css样式中的margin类似,通过在 标签内定义cellspacing属性,来为其标签下的所有td元素设置外边距。该属性也是以数字的形式来确定外边距的大小,例如cellspacing=”10″则表示这个table中的所有
标签的外边距为10px 为表格设置背景
表格可以通过background属性为表格或单元格设置任意图片作为背景,其使用方法非常像css中的background。为background设置对应的图片路径,即可使单元格显示相应的图片。例如background=”table_bg.gif”
表格内容的对齐排列
表格的对齐分为水平对齐和垂直对齐。它们分别是align属性与valign属性,将这两个属性插入到对应的
标签中即可完成单元格内文本或图像的对齐。 水平对齐align分别有三个值:left左对齐、center水平居中、right右对齐
垂直对齐valign也有三个值:top顶端对齐、middle垂直居中、bottom底部对齐、baseline为基线对齐。
其中基线对齐可能无法从字面上理解,其实基线对齐也就是文本出现在表格的中上部而不是正中央。如果文字不大的话,效果和middle差不多,比middle稍微靠上一点。
html居中对齐的设置(html合并单元格居中)
HTML中的表格是由标签进行定义的,表格在HTML中的表现形式与使用方法与word中的表格非常类似。多数情况使用Dreamweaver的可视化视图只做表格更为简单、方便。本文主要讲述如何使用代码来编写
本文内容由互联网用户自发贡献,该文观点仅代表作者本人,本站仅供展示。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 97552693@qq.com 举报,一经查实,本站将立刻删除。