多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
一个表格由若干个行组成,一个行由若干的列(单元格)组成,如下所示: ![](https://img.kancloud.cn/3e/ee/3eeeecb89ecdd6a44b8c36aaafc6e902_966x134.png) 这是表格的最初始形式。 一个表格中,包含了“行”,“列”,“单元格”3个概念,如下所示: ![](https://img.kancloud.cn/8c/3c/8c3c44924df0bf0c465b9b759d2b4e57_953x430.png) 表格的基本标签形式如下: ``` <table 属性.... > <tr > <td 属性.... > 内容 </td> 。。。若干个单元格。。。 </tr> 。。。若干个行。。。 </table> ``` 其中: * table: 表示表格(整体),有多个常用属性。 * tr: 表示行,基本上没有什么属性。 * td: 表示单元格(列),有多个常用属性。 > 注意:这里,table,tr, td是严格的嵌套关系,即只能按此层次关系出现。 ## 9.1.1.table标签常用属性: ![](https://img.kancloud.cn/c7/b7/c7b7ead4e0de9808c305f039c1e83fb0_1066x420.png) 有关cellspacing和cellpadding的图示: ![](https://img.kancloud.cn/a3/ba/a3ba535d99bc018af21273ef22a915be_511x255.png) ## 9.1.2.td标签常用属性: ![](https://img.kancloud.cn/4b/30/4b308a12fa4b10a6557e6c73fe5c6340_1070x387.png) 形式: ``` <td width=”xx” height=”xx” align=”xx” valign=”xx” colspan=”xx” rowspan=”xx” > 。。。。 </td> ``` 表格基本演示: ## 9.1.3.th标签 上面,td标签可以使用th进行替换,表示“标题单元格”,其本质也是单元格。 但th标签有特殊效果:自动加粗并居中。 ![](https://img.kancloud.cn/fb/f8/fbf83da8d1f5357a91d586d7fa2e46a1_990x131.png) ## 9.1.4.单元格的合并 原则上,表格的行列应该是“对齐”的。 但我们可以对其中“相邻的”单元格进行合并,得到类似如下的表格: ![](https://img.kancloud.cn/03/8d/038d2d13c039fe4b6b8dc8577d377dac_962x130.png) 这个怎么做到呢? * 横向合并: 在横向合并的最左边的单元格标签上加属性:colspan=”合并的个数” 特别注意:被合并的其余单元格要删除! * 纵向合并: 在纵向合并的最上边的单元格标签上加属性:rowspan=”合并的个数” 特别注意:被合并的其余单元格要删除! 表格练习: 代码如下: