⽤html制作四⾏四列的表格,HTML表格
释放双眼，带上⽿机，听听看~！
HTML表格是web1.0时代的产物，现在已经基本上被淘汰了，但是有些时候还是会⽤到，这⾥有必要简单的讲述⼀下。
表格由⼀⾏或多⾏单元格组成，应⽤表格可以让数据展现更有条理，表格标签有：table标签(表格)、tr标签(⾏)、td标签(单元格)组成。例如，要展现⼀组企业员⼯通讯录，通讯录包括员⼯名称、电话、电⼦邮件、职务四项，就可以使⽤多⾏四栏的表格来展现企业员⼯通讯录。
假如有下⾯的企业员⼯通讯录(张三，电话，邮件，研发⼯程师)、(王⼆，电话，邮件，研发经理)、(李四，电话，邮件、研发⼯程师)，企业员⼯通讯录可以使⽤HTML表格元素来展现。
下图是浏览器显⽰效果。从浏览器显⽰效果可以看出，表格为四⾏四列，第⼀⾏为表头，使⽤tr标签，tr标签内的单元格使⽤th标签，标签间的内容为⿊体字体起到强调的作⽤；第⼆、三、四⾏为表格主体，也使⽤tr标签，tr标签内的单元格使⽤td标签，标签间的内容为普通字体。
表格线
上图显⽰的表格有个缺点，栏与栏之间，⾏与⾏之间没有表格线，整个表格结构不是很清晰。可以在table标签内添加属性boder来设置表格线，border的值为表格线的宽度，单位为百分数或像素。在前⾯HTML⽂档的table标签添加border属性，属性的值为1像素，这个理论上应该在CSS样式中去说的，现在想起来了就先了解⼀下吧,HTML⽂档的样式都是由CSS来控制的。
在table标签添加border属性后，企业员⼯通讯录在浏览器显⽰的效果如下图所⽰。
这⾥补充说⼀下表格的样式，以后在CSS的学习中就不说了，以为表格这东西基本上已经是淘汰的产物，不过会在⼀些特殊情况下⽤到。
表格栏间距离(cellspacing)
表格栏间距离是指表格栏与栏之间的距离，table标签的cellspacing属性⽤于设置表格栏之间的距离，cellspacing属性的值可以是百分数或像素。在前⾯HTML⽂档的table标签添加cellspacing属性，属性的值为20像素，cellspacing="20"。
在table标签添加cellspacing属性后，企业员⼯通讯录在浏览器显⽰的效果如下图所⽰。
表格单元格内间距(cellpadding)
表格单元格内间距是指表格单元格内容与单元格边线之间的距离。在上图的企业员⼯通讯录中，表格单元格的内容与单元格边线紧挨在⼀起，没有边距，表格加上边线后，显得不够直观。在前⾯HTML⽂档的table标签添加cellpadding属性，属性的值为20像素，语法为cellpadding="20"。
在table标签添加cellpadding属性后，企业员⼯通讯录在浏览器显⽰的效果如下图所⽰。
上图的表格并不是我们希望显⽰的表格样式，特别是表格边线没有完整地连接在⼀起。原因是表格属性cellspacing设置过宽，每个表格单元都被单独分隔，设置cellspacing为0即可，在修改cellspacing属性后，企业员⼯通讯录在浏览器显⽰的效果如下图所⽰。
设置表格宽度
前⾯的table标签没有设置表格宽度，表格宽度就是表格中每⼀列宽度的总和，列的宽度由单元格的内容和cellpadding属性来确定。可以在table标签中添加width属性来设置表格的宽度，单位为百分数或像素。在前⾯HTML⽂档的table标签添加width属性，属性的值为1000像素，语法为width="1000"，显⽰效果如下图所⽰。
表格单元格内容对齐属性分为⽔平对齐和垂直对齐两种⽅式。⽔平对齐⼜分为左对齐、居中对齐、右对齐和两端对齐；垂直对齐⼜分为上对齐、中对齐、底对齐。表格单元格内容对齐属性可以应⽤于tr标签、th标签和td标签。
⽔平对齐属性为align，常⽤值为left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)。
垂直对齐属性为valign，常⽤值为top(上对齐)、middle(中对齐)、bottom(底对齐)。
html网页设计 table 上图中的表格改变宽度后，单元格内容没有在⽔平⽅向上居中对齐，在tr标签添加align属性，值为center，语法为align="center"。
在tr标签添加align属性后，企业员⼯通讯录在浏览器显⽰的效果如下图所⽰。
表格的⾏合并与栏合并
前⾯介绍的表格都是由简单的⾏和列组成的，如果要展现⼀些复杂的表格就难以胜任了。例如下⾯的表格：
⽹页要展现上述表格就需要⽤到表格的⾏合并属性与栏合并属性。⾏合并属性⽤于⼀个单元格跨越多⾏，通常使⽤在td和th标签中，属性为rowspan；栏合并属性⽤于⼀个单元格跨越多栏，通常使⽤在td和th标签中，属性为colspan。下⾯的HTML⽂档可以实现上述表格的展现。
下图是浏览器显⽰效果。从浏览器显⽰效果可以看出，表格的第⼀⾏单元格使⽤了colspan属性，属性的值为4，表⽰将该⾏的四个单元格合并为⼀个单元格；第三⾏的第⼆个单元格使⽤了rowspan属性，属性值为2，将第三⾏和第四⾏的第⼆个单元格跨⾏合并为⼀个单元格；第五⾏使⽤了colspan属性，属性的值为3，将该⾏的前三个单元格合并为⼀个单元格。
总结：
表格标签有：table标签(表格)、tr标签(⾏)、td标签(单元格)组成，可以在table标签内添加属性boder来设置表格线，还可以⽤cellspacing 属性来修改表格之间的外部间距，同时也可以⽤cellpadding来修改表格的内边距，表格的宽度可以⽤width来指定，对齐⽅式可以⽤align 来添加，⾏合并可以⽤rowspan，栏合并可以⽤colspan，这些要是现在能记住以后对CSS学习还是很有帮助的，这些基本就是CSS基础样式修改的常⽤语法标签。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。