在咱们做网页当中常常要用到表格，当然也有人会抉择用div来绘制一个表格。而用div绘制会存在诸多问题，而且也不不便保护。所以表格标签也是咱们前端开发必备的技能。
咱们先通过guiplan一键插入一个表格模版，
如果看不懂能够看源代码如下：
<table id="g570b4"> <tr id="g419fe"> <th id="g16b02">th标头 </th> <th id="gaae0b" class=" u7959f">th标头 </th> <th id="gd78bc">th标头 </th> </tr> <tr id="g5af9b"> <td id="g920bb">td表格单元 </td> <td id="g9de93" class=" uab6e6">td表格单元 </td> <td id="gea8dc">td表格单元 </td> </tr> <tr id="cf47d6" class=" u0cbcd "> <td id="c913e3" class=" ud690a ">td表格单元 </td> <td id="c452e0" class=" uab6e6 ">td表格单元 </td> <td id="c917b3" class=" u7eb06 ">td表格单元 </td> </tr> <tr id="cba81f" class=" u0cbcd "> <td id="c3dae7" class=" ud690a ">td表格单元 </td> <td id="c7d0f9" class=" uab6e6 ">td表格单元 </td> <td id="c9fe10" class=" u7eb06 ">td表格单元 </td> </tr> </table> 其中表格标签里还含有tr标签，th标签，td标签。tr标签则示意一行，td标签则示意行里的每一列，而th标签则示意表格的头部题目，th标签除了示意与事实头部题目以外，还有一个很重要的作用就是它能够管制对应列里宽度，这样如果发现内容显示不全的状况下，咱们就能够在guiplan里拖拽th标签的宽度即可。
表格除了这些子元素以外，表格还自带属性。当然这些属性咱们也记不住，去查文档效率又太低。咱们能够持续通过guiplan一键插入属性即可，比方给表格增加边框，只须要选中边框而后插入进来即可。
当然边框也有很多属性，以上是内侧边框与外侧边框一起显示的成果，下一章解说表格的其余属性。最初附上生成之后的源代码
<table id="g570b4" border="1"> <tr id="g419fe"> <th id="g16b02">th标头 </th> <th id="gaae0b">th标头 </th> <th id="gd78bc" class=" u5899e">地址 </th> </tr> <tr id="g5af9b"> <td id="g920bb">td表格单元 </td> <td id="g9de93" class=" uab6e6">td表格单元 </td> <td id="gea8dc">上海浦东虹桥某某小区某某地点 </td> </tr> <tr id="cf47d6" class=" u0cbcd "> <td id="c913e3" class=" ud690a ">td表格单元 </td> <td id="c452e0" class=" uab6e6 ">td表格单元 </td> <td id="c917b3" class=" u7eb06 ">td表格单元 </td> </tr> <tr id="cba81f" class=" u0cbcd "> <td id="c3dae7" class=" ud690a ">td表格单元 </td> <td id="c7d0f9" class=" uab6e6 ">td表格单元 </td> <td id="c9fe10" class=" u7eb06 ">td表格单元 </td> </tr> </table><style>.u5899e { width: 162px;}</style>