表格的实现
原创表格的实现
原创
本章主要来了解一下新的标签，就是表格标签，我们可以先来认识一下什么是表格，当你写excle的时候，大家都会看到一个格子一个格子的形式的，那么它们组合成的就是表格。
我们简单的分析一下，一个基本的表格要用到的元素是，表的单元格，表格行，表格头。
HTML表格元素使用table标签，表格元素的所有内容都放置在table的起始标签和结束标签内，表格的行元素使用tr标签，一对tr标签（标签的起始标签和结束标签称为一对标签）表示表格的一行。表格的单元格放置在tr标签内，单元格又分为表头（表格的开头部分）和表格单元格（表格的主体部分），表头使用th标签，表格单元格使用td标签。
接下来，我就写一个最基本的表格，先看下面完整的代码：
<h1>前端技术栈</h1>
<table>
<tr>
<td></td>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr>
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>
<tr>
<td>小明</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小红</td>
<td></td>
<td></td>
<td></td>
</tr>
</table> 写一个表格，你不管怎么去写，所有内容都要包在table标签里面，所以写完标题，我们直接就一个table标签扔在上面。
<table>
</table>然后你要思考，需求是做成怎么样的一个标签，假如说现在要做的是一个四行四列的表格，我们现在知道，tr标签代表的是表格的行，那么，我们就要写四个tr标签。
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>接下来如果要加上表格头的话，我们可以在第一行加上表格头th标签，th标签出东西会加黑加粗。
<table>
<tr>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>在之后，就是每个单元格了，你可以理解为是内容，td标签
<tr>
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>我们完成之后运行出来的代码如下：
这时候，我们会发现，这个表格很单调，连框框都没有，所以我们要给table标签加个border属性，border的意思是边框，我们给个1px，看看效果
<table border="1px">
</table>
虽然我们加上了border属性，但是这个表格并不是实心的横线，它有间隙，所以我们还要接着给table标签加上另外一个属性cellspacing表示单元格间隙，我们给它一个0
<table border="1px" cellspacing="0">
</table>
到这里，基础的步骤我们都已经完成了，但是我们可以看到这个每个单元格都不是每个都一个大小的，它是根据里面字的最大长度来撑大的。怎么样才能让每个单元格一样呢？我们是不是只要给每个单元格设置一样的长度就可以了，我们可以试一下：
<h1>前端技术栈</h1>
<table border="1px" cellspacing="0">
<tr>
<td width="200px"></td>
<th width="200px">初级</th>
<th width="200px">中级</th>
<th width="200px">高级</th>
</tr>
<tr>
<td width="200px">技术技能</td>
<td width="200px">html和css</td>
<td width="200px">js和jq</td>
<td width="200px">vue和react和angular</td>
</tr>
<tr>
<td width="200px">小明</td>
<td width="200px"></td>
<td width="200px"></td>
<td width="200px"></td>
</tr>
<tr>
<td width="200px">小红</td>
<td width="200px"></td>
<td width="200px"></td>
<td width="200px"></td>
</tr>
</table>
我们可以看到每个单元格都变为了一样的长度为200px，此时我们看到的界面它们都是一样的，但是我们又希望文字可以居中，文字靠左的话有点丑，我们只要在每个单元格标签内加上align属性，它表示排列，这里表示对齐方式，让它居中就可以了。
<h1>前端技术栈</h1>
<table border="1px" cellspacing="0">
<tr>
<td width="200px" align="center"></td>
<th width="200px" align="center">初级</th>
<th width="200px" align="center">中级</th>
<th width="200px" align="center">高级</th>
</tr>
<tr>
<td width="200px" align="center">技术技能</td>
<td width="200px" align="center">html和css</td>
<td width="200px" align="center">js和jq</td>
<td width="200px" align="center">vue和react和angular</td>
</tr>
<tr>
<td width="200px" align="center">小明</td>
<td width="200px" align="center"></td>
<td width="200px" align="center"></td>
<td width="200px" align="center"></td>
</tr>
<tr>
<td width="200px" align="center">小红</td>
<td width="200px" align="center"></td>
<td width="200px" align="center"></td>
<td width="200px" align="center"></td>
</tr>
</table>
但是这种方式就很繁琐，我们这还是四行四列，万一做到很长的表格，人就裂开了，所以这种方法是不提倡的。所以接下来，我就教大家一个简单的写法，我们在表格的开始的位置上加一个col标签，col是column列的缩写，注意这个标签是一个单标签。
<h1>前端技术栈</h1>
<table border="1px" cellspacing="0">
<col width="200px">
<tr>
<td></td>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr>
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>
<tr>
<td>小明</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小红</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>如上面所写，我们只要给col这个标签来个宽度为200px，那么它此时代表的第一列的宽度都会为200px
接下来，我们按照相同的方法，只要在写三次的col标签，就可以设置完四列的宽度了
<table border="1px" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr>
<td></td>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr>
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>
<tr>
<td>小明</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小红</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
同样的道理，如果想让此时的文字居中，我们也没必要去每个单元格写align属性居中，只要在每个tr标签这是align属性就可以了，也就是设置每一行的align属性
<h1>前端技术栈</h1>
<table border="1px" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr align="center">
<td></td>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr align="center">
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>
<tr align="center">
<td>小明</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>小红</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
可能有些人会有疑问，你可以给设置每列的长度，为什么不能设置每列的文字居中呢，而是只能设置每行的文字居中，那当然是每列设置居中，是没有效果的啦，起码你用chrome浏览器运行代码是不起作用的，你要是问我为什么，col标签明明又align属性，但是不能用，我只能说可能是浏览器不能兼容，但是其实你给tr标签居中也是一样的，你同样要写一样的遍数。
那么，最基本的表格标签的内容就到这里结束了，我们下一个文章再见。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。