西安电子科技大学出版社:网站设计开发教程

网站设计开发教程。

西安电子科技大学出版社。

来看表格元素，表格元素本身并不复杂，大家可以看到实际上就是一个table里边带着若干个行t>和每一行里边的若干个单元格t>这样的东西来组成的。一个table里边可以带多个t>，每一个t>就代表一个行，这里可以看到是两行。

每一行里边如果是像现在显示的有三个t>，那么它就是一个两行三列的表格。比如规定整个的表格的宽度是200个px，也就是200个像素，就是固定宽度这样一个方式。当然也可以规定比如百分比，它的宽度比如50%，那它就是这个表格可以随着浏览器宽度的放大缩小而放大缩小。

另外还有一个border，大家可能注意到border这个地方被IDEA划了一条线表示，这是一个过时的属性，这实际上显示就是过时属性，确实它是一个过时的属性。因为在HTML5里边可以用CSS，也经常提到可以用更复杂的CSS，包括HTML5的其它的一些方式来设置表格的这种显示方式。

这里稍微简单点，就用HTML4里边的border，它等于1意味着这个表格是有边框的，里里外外有边框的，这样可以看到这个表格。实际演示一下这个表格的显示，就是这样的一个显示。大家可以看到在这个表格里就是两行三列，这里边内容就填充在里边了，它的宽度也是绝对宽度200个px，200个像素这么宽。

另外经常也需要表格的这种合并，就是它的这种单元格之间的合并，比如A1、B1这两个单元格合并，横着合并或者是竖着合并，比如A1和A2这样的单元格合并可不可以做到？实际上就是需要通过一些更具体的方式，就是可以声明我的某一个单元格，它是横跨了两个列或者是横跨了两个行，比如这个就是横跨了两个行，而这个是横跨了两个列来做到的。

当然这里大家注意到除了刚才提到的tr以外，还增加了一些其它的表格的元素，比如caption，它实际上就是表格的一些标题，还增加了th，它其实就是表头，可以理解为head表头，它在显示的时候表头天生会显示的，比如加粗、加黑可以有这样的一些效果。

主要是关注它是如何，比如同样的下边儿的这一行是三个格儿，而上面儿这行就会变成两个格儿，因为它把其中的两列合并了，就是一个电话这样一个元素就占了两个列。同样的道理，可以看到电话在这儿其实又占了两个行，看一下实际的显示效果，更清楚的看到它最后显示出来的情况。

在这里边就刚才提到的占了两个列的电话，它最后就是把两个列进行合并，而占了两个行的电话实际上就是上下的两行被它合并掉了，也就说下边这一行干脆就只有一个单元格了，就达成了这样的一个效果，这个在表格里边是可以设置的。

另外大家可以看到还给了这样一个带有语义的表格的表现方式，带有语义的表格的表方式实际上可能注意到在拖拽的时候应该看到一个特殊的效果，就是拖拽了head的部分、thead部分和tfoot的部分，结果中间的body的部分没有被拖拽，按理说应该是先是head，然后是foot。

为什么会这样？这是因为在设计的时候故意把它们的顺序做了一个改变，在这个table>里人为的规定它有head的部分，然后这里边的所有的行都是head这样一个语义标签里边的内容，然后这一行，把它放到了foot元素里边，也就说这个内容不管是多少行都是foot，这样的就是表尾的部分，而表的身体的部分也就是最中间的部分，把它放到了最后。

但是在实际显示的时候其实可以看到先是head的文本，然后是body，然后是body，然后才是foot，这意味着什么？意味着这些标签其实是带有一定的语义的，也就说它们不光是名字叫body，名字叫foot，名字叫head，实际上是带有一定的语义的。

浏览器在解析它们的时候是按照这样的语义来解析的，也就是它会自觉地把head放到最上边，把foot到最下边，而body放到中间，这个对未来做数据库的设计的时候，如果希望表达数据库的数据的时候就可以用这些语义化的标签来更方便地表达数据的表格。

这些就是表格元素。西安电子科技大学教材建设基金资项目，高等学校新工科计算机类专业系列教材，保姆级教材，网站设计开发教程。