前端学习笔记⼀：HTML（4）在⽹页内插⼊并设计⼀个表格继续。
第六段代码，管它叫两个表格。
虽然叫两个表格，但是因为都是表格内容重复度有点⼤，因此选个复杂⼀点来讲。
先看代码:
<!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>
html网页设计教程(推荐)</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>表头单元格标签，它就会⾃动加粗。复杂⼀点的或者需要花样的，到时候再说（

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