北京中科白癜风医院刘云涛 https://wapjbk.39.net/yiyuanfengcai/ys_bjzkbdfyy/表格基本结构表格由一行或多行单元格组成，应用表格可以让数据展现更有条理。例如，要展现一组企业员工通讯录，通讯录包括员工名称、电话、电子邮件、职务四项，就可以使用多行四栏的表格来展现企业员工通讯录。HTML表格元素使用table标签，表格元素的所有内容都放置在table的起始标签和结束标签内，表格的行元素使用tr标签，一对tr标签（标签的起始标签和结束标签称为一对标签）表示表格的一行。表格的单元格放置在tr标签内，单元格又分为表头（表格的开头部分）和表格单元格（表格的主体部分），表头使用th标签，表格单元格使用td标签。基本表格结构如下。假如有下面的企业员工通讯录（张三，电话，邮件，研发工程师）、（王二，电话，邮件，研发经理）、（李四，电话，邮件、研发工程师），企业员工通讯录可以使用HTML表格元素来展现。下图是浏览器显示效果。从浏览器显示效果可以看出，表格为四行四列，第一行为表头，使用tr标签，tr标签内的单元格使用th标签，标签间的内容为黑体字体起到强调的作用；第二、三、四行为表格主体，也使用tr标签，tr标签内的单元格使用td标签，标签间的内容为普通字体。表格线上图显示的表格有个缺点，栏与栏之间，行与行之间没有表格线，整个表格结构不是很清晰。可以在table标签内添加属性boder来设置表格线，border的值为表格线的宽度，单位为百分数或像素。在前面HTML文档的table标签添加border属性，属性的值为1像素。在table标签添加border属性后，企业员工通讯录在浏览器显示的效果如下图所示。表格栏间距离（cellspacing）表格栏间距离是指表格栏与栏之间的距离，table标签的cellspacing属性用于设置表格栏之间的距离，cellspacing属性的值可以是百分数或像素。在前面HTML文档的table标签添加cellspacing属性，属性的值为20像素。在table标签添加cellspacing属性后，企业员工通讯录在浏览器显示的效果如下图所示。表格单元格内间距（cellpadding）表格单元格内间距是指表格单元格内容与单元格边线之间的距离。在上图的企业员工通讯录中，表格单元格的内容与单元格边线紧挨在一起，没有边距，表格加上边线后，显得不够直观。在前面HTML文档的table标签添加cellpadding属性，属性的值为20像素。在table标签添加cellpadding属性后，企业员工通讯录在浏览器显示的效果如下图所示。上图的表格并不是我们希望显示的表格样式，特别是表格边线没有完整地连接在一起。原因是表格属性cellspacing设置过宽，每个表格单元都被单独分隔，设置cellspacing为0即可。在修改cellspacing属性后，企业员工通讯录在浏览器显示的效果如下图所示。设置表格宽度前面的table标签没有设置表格宽度，表格宽度就是表格中每一列宽度的总和，列的宽度由单元格的内容和cellpadding属性来确定。可以在table标签中添加width属性来设置表格的宽度，单位为百分数或像素。在前面HTML文档的table标签添加width属性，属性的值为像素。在table标签添加width属性后，企业员工通讯录在浏览器显示的效果如下图所示。表格单元格内容对齐属性表格单元格内容对齐属性分为水平对齐和垂直对齐两种方式。水平对齐又分为左对齐、居中对齐、右对齐和两端对齐；垂直对齐又分为上对齐、中对齐、底对齐。表格单元格内容对齐属性可以应用于tr标签、th标签和td标签。水平对齐属性为align，常用值为left（左对齐）、center（居中对齐）、right（右对齐）、justify（两端对齐）。垂直对齐属性为valign，常用值为top（上对齐）、middle（中对齐）、bottom（底对齐）。上图中的表格改变宽度后，单元格内容没有在水平方向上居中对齐，在tr标签添加align属性，值为center。在tr标签添加align属性后，企业员工通讯录在浏览器显示的效果如下图所示。表格的行合并与栏合并前面介绍的表格都是由简单的行和列组成的，如果要展现一些复杂的表格就难以胜任了。例如下面的表格：网页要展现上述表格就需要用到表格的行合并属性与栏合并属性。行合并属性用于一个单元格跨越多行，通常使用在td和th标签中，属性为rowspan；栏合并属性用于一个单元格跨越多栏，通常使用在td和th标签中，属性为colspan。下面的HTML文档可以实现上述表格的展现。下图是浏览器显示效果。从浏览器显示效果可以看出，表格的第一行单元格使用了colspan属性，属性的值为4，表示将该行的四个单元格合并为一个单元格；第三行的第二个单元格使用了rowspan属性，属性值为2，将第三行和第四行的第二个单元格跨行合并为一个单元格；第五行使用了colspan属性，属性的值为3，将该行的前三个单元格合并为一个单元格。
转载请注明：http://www.aierlanlan.com/cyrz/6637.html
