前端学习笔记一:HTML(4)在网页内插入并设计一个表格

    技术2024-11-03  20

    继续。

    第六段代码,管它叫两个表格。 虽然叫两个表格,但是因为都是表格内容重复度有点大,因此选个复杂一点来讲。 先看代码:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1px" cellspacing="0px"> <thead> </thead> <tbody> <colgroup span="6" width="100px" /> <colgroup span="1" width="140px" /> <tr height="40px" align="center"> <th colspan="7">个人简历</th> </tr> <tr height="40px" align="center"> <td>姓名</td> <td></td> <td>性别</td> <td></td> <td>年龄</td> <td></td> <td rowspan="4">照片</td> </tr> <tr height="40px" align="center"> <td>学历</td> <td></td> <td>籍贯</td> <td colspan="3"></td> </tr> <tr height="40px" align="center"> <td>电话</td> <td></td> <td>政治面貌</td> <td colspan="3"></td> </tr> <tr height="40px" align="center"> <td>毕业院校</td> <td colspan="5"></td> </tr> <tr height="40px" align="center"> <td>求职意向</td> <td colspan="6"></td> </tr> </tbody> <tfoot> </tfoot> </table> </body> </html>

    得到这样一个表格: 看上去有点复杂,在分析怎样制作这样的表格之前还是得先讲解新标签。 这次按照制作表格的来讲讲把,说不定以后也会这样: 首先,当你想制作一个表格,在HTML里首先考虑的不是有几行几列以及表格的设计样式,而是先给网页腾个表格的空间,即用</table>定义一个表格,table标签常用的属性有border和cellspacing。border定义整个表格的外边框的大小,单位为px,当为0时表格没有外边框;cellspacing定义个各个表格元素之间的间隙,单位为px,当为0时如上图所示各个单元格之间没有间隙。

    定义完表格后就开始考虑表格的大小,即表格有几行几列。HTML在table标签的内容内使用</tr>来定义行,</td>来定义一行内的每一个单元格,例如要建立一个3x3的表格就这样定义:

    <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

    这样会出现一个问题,如果要制作一个很大的表格,甚至有几百行几十列时,一个个标签的打或者复制还挺麻烦的。 这时候有个小技巧,当你需要在table标签的内容内制作x行y列的表格时,输入一行这样的代码: tr*x>tr*y 然后再按下tab键就能够快速生成相应的表格了。

    表格制作完了,接下来就开始设计表格样式,以本示例的运行结果为例进行分析讲解: 首先,如果你刚用上一行代码设计完表格的大小就迫不及待地想看效果,不好意思,你只能看到一片空白( 如果你记性好一点,提前设置了边框,就显示成这样: 如果记性再好一点再把单元格之间的空隙去掉,就这样: 如果你比较衰,只记得设置了空隙,那就还是只有一片空白等着你(( 之所以会这样,是因为默认情况下每一个单元格的大小只跟单元格的内的内容有关,并且同一列表格的大小跟该列里最大的一个单元格相同。如下图所示: 一般情况下,都希望一个表格里每一个单元格的大小都死提前设定好且统一的,就如同示例的运行结果所示。这时候就需要现在tr标签里加入高度属性height,单位为px;然后在td标签里加入宽度属性height,单位为px;

    但是细心的人可能又会发现了,刚刚才说过设计很大的表时一行行的复制tdtr标签很花费时间,这一行行的输入高度和宽度属性难道就不累吗?别急,你看示例里的代码也没有一行行的输入啊( 这时候有个更方便的方法,就是利用<col>标签设置width宽度属性提前设置好每一列表格的宽度,从上到下的每一个col标签对于从左到右的每一列表格。

    可能这个表格内的某几列或者所有列数的宽度都是一样的,那这里还有个更方便的办法,那就是利用<colgroup>标签的span属性设置这个列属性对几列表格生效,width属性设置这若干列表格的宽度。

    好像说的都是宽度是不是?因为高度真的只能一个个的在tr标签的height属性里设置,至少学到目前是只能这样( 以及希望表格里的若干行里的内容都要居中时,也只能在一个个tr标签里的align属性里设置(值为center),并且如果你丧心病狂的要求一个行里的特定列居中其余还有另外的靠拢方式的话你更是得一个个td的align属性里设置((

    另外可能还会希望合并表格里的某一些单元格。首先你得确定合并的样式,例如是行合并还是列合并,从哪一行/列开始合并,合并几行/列。 一个个来,决定是行合并的话,需要在开始合并的行tr标签里添加colspan属性,输入的值就是你要往下合并的行数。 决定是列合并的话也类似,在要开始合并的列td标签里添加rowspan属性并输入要往右合并的列数。 具体实例就再看一遍示例(才不是因为懒

    可能还会需要给表格的标题或者特定的行/列的标题作强调处理,最简单的方法就是把对应的td或tr标签换成</th>表头单元格标签,它就会自动加粗。复杂一点的或者需要花样的,到时候再说(

    Processed: 0.052, SQL: 9