西安电子科技大年夜学出版社：网站设计开拓教程

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

来看表格元素，表格元素本身并不繁芜，大家可以看到实际上便是一个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放到中间，这个对未来做数据库的设计的时候，如果希望表达数据库的数据的时候就可以用这些语义化的标签来更方便地表达数据的表格。

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