HTML表格详解：属性、合并与嵌套-优快云博客

本文链接：https://blog.youkuaiyun.com/lxr_99/article/details/117391097

一：概念

<table>标签定义HTML表格。

简单的HTML表格由table元素和一个或多个tr、th或td元素组成。

tr--------表格行

th--------表头

td--------表格列

复杂表格中

caption---------标题

二：属性

属性	值	描述
align	left center right	元素对齐方式
bgcolor	rgb（x，x，x） #xxxxxx colorname	背景颜色
cellpadding	pixels %	规定单元格边框与内容的距离
cellspacing	pixels %	规定单元格之间的距离
height	pixels %	规定表格的高度
width	pixels %	规定表格的宽度
rowspan	number	跨行合并
colspan	number	跨列合并
frame	above below hsides vsides box border	规定外边框哪个部分可见

补充：

（1）跨行和跨列属性是对td和th两个单元格使用的，对tr行标签无效。

（2）rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。

（3）每次合并 n 个单元格都要少写 n-1 个<td>标签（需要删除相应行内单元格，否则就会出现bug）。

三：frame属性演示

<html>
<body>
<p>Table with frame="box":</p>
<table frame="box">
    <tr> <th>Month</th>
         <th>Savings</th> </tr>
  
    <tr> <td>January</td>
         <td>$100</td> </tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
    <tr> <th>Month</th>
         <th>Savings</th> </tr>
  
    <tr> <td>January</td>
         <td>$100</td> </tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
    <tr> <th>Month</th>
         <th>Savings</th> </tr>
  
    <tr> <td>January</td>
         <td>$100</td> </tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
    <tr> <th>Month</th>
         <th>Savings</th> </tr>
  
    <tr> <td>January</td>
         <td>$100</td> </tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
    <tr> <th>Month</th>
         <th>Savings</th> </tr>
  
    <tr> <td>January</td>
         <td>$100</td> </tr>
</table>
</body>
</html>

运行结果：

四：表格包含表格

<html>
<body>
<table border="1">
   <tr>
    <td>表格包含表格
    <table border="1">
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td> </tr>
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td> </tr>
    </table>
     </td>
     </tr>
  </table>
</body>
</html>

运行结果：