本章主要来了解一下新的标签，就是表格标签，我们可以先来认识一下什么是表格，当你写excle的时候，大家都会看到一个格子一个格子的形式的，那么它们组合成的就是表格。
我们简单的分析一下，一个基本的表格要用到的元素是，表的单元格，表格行，表格头。
HTML表格元素使用table标签，表格元素的所有内容都放置在table的起始标签和结束标签内，表格的行元素使用tr标签，一对tr标签（标签的起始标签和结束标签称为一对标签）表示表格的一行。表格的单元格放置在tr标签内，单元格又分为表头（表格的开头部分）和表格单元格（表格的主体部分），表头使用th标签，表格单元格使用td标签。
接下来，我就写一个最基本的表格，先看下面完整的代码：
代码语言：javascript复制<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标签扔在上面。
代码语言：javascript复制<table>
</table>然后你要思考，需求是做成怎么样的一个标签，假如说现在要做的是一个四行四列的表格，我们现在知道，tr标签代表的是表格的行，那么，我们就要写四个tr标签。
代码语言：javascript复制<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>接下来如果要加上表格头的话，我们可以在第一行加上表格头th标签，th标签出东西会加黑加粗。
代码语言：javascript复制<table>
<tr>
<th>初级</th>
<th>中级</th>
<th>高级</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>在之后，就是每个单元格了，你可以理解为是内容，td标签
代码语言：javascript复制<tr>
<td>技术技能</td>
<td>html和css</td>
<td>js和jq</td>
<td>vue和react和angular</td>
</tr>我们完成之后运行出来的代码如下：
不加内容的单纯表格这时候，我们会发现，这个表格很单调，连框框都没有，所以我们要给table标签加个border属性，border的意思是边框，我们给个1px，看看效果
代码语言：javascript复制<table border="1px">
</table>
加了border属性的表格虽然我们加上了border属性，但是这个表格并不是实心的横线，它有间隙，所以我们还要接着给table标签加上另外一个属性cellspacing表示单元格间隙，我们给它一个0
代码语言：javascript复制<table border="1px" cellspacing="0">
</table>
去掉间隙，cellspacing到这里，基础的步骤我们都已经完成了，但是我们可以看到这个每个单元格都不是每个都一个大小的，它是根据里面字的最大长度来撑大的。怎么样才能让每个单元格一样呢？我们是不是只要给每个单元格设置一样的长度就可以了，我们可以试一下：
代码语言：javascript复制<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属性，它表示排列，这里表示对齐方式，让它居中就可以了。
代码语言：javascript复制<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列的缩写，注意这个标签是一个单标签。
代码语言：javascript复制 <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标签的作用接下来，我们按照相同的方法，只要在写三次的col标签，就可以设置完四列的宽度了
代码语言：javascript复制<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>
写四次col标签并设置其宽度同样的道理，如果想让此时的文字居中，我们也没必要去每个单元格写align属性居中，只要在每个tr标签这是align属性就可以了，也就是设置每一行的align属性
代码语言：javascript复制<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标签居中也是一样的，你同样要写一样的遍数。
那么，最基本的表格标签的内容就到这里结束了，我们下一个文章再见。
