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

6hz7vif

网站设计研发教程。

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

来看表格元素，表格元素本身并不繁杂，大众能够看到实质上便是一个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表头，它在表示的时候表头天生会表示的，例如加粗、加黑能够有这般的有些效果。

重点是关注它是怎样，例如一样的下边儿的这一行是三个格儿，而上面儿这行就会变成两个格儿，由于它把其中的两列合并了，便是一个tel这般一个元素就占了两个列。同样的道理，能够看到tel在这儿其实又占了两个行，看一下实质的表示效果，更清楚的看到它最后表示出来的状况。

在这儿边就刚才说到的占了两个列的tel，它最后便是把两个列进行合并，而占了两个行的tel实质上便是上下的两行被它合并掉了，亦就说下边这一行干脆就仅有一个单元格了，就达成为了这般的一个效果，这个在表格里边是能够设置的。

另一大众能够看到还给了这般一个带有语义的表格的表现方式，带有语义的表格的表方式实质上可能重视到在拖拽的时候应该看到一个特殊的效果，便是拖拽了head的部分、thead部分和tfoot的部分，结果中间的body的部分无被拖拽，按理说应该是先是head，而后是foot。

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

然则在实质表示的时候其实能够看到先是head的文本，而后是body，而后是body，而后才是foot，这寓意着什么？寓意着这些标签其实是带有必定的语义的，亦就说它们不但是名字叫body，名字叫foot，名字叫head，实质上是带有必定的语义的。

浏览器在解析它们的时候是根据这般的语义来解析的，亦便是它会自觉地把head放到最上边，把foot到最下边，而body放到中间，这个对将来做数据库的设计的时候，倘若期盼表达数据库的数据的时候就能够用这些语义化的标签来更方便地表达数据的表格。

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