html-table

基本定义及创建:

• 表格是由<table>定义
• 表格中的每行由<tr>定义
• 每行中的每列由<td>定义
  例：

  <table> 
   <tbody>
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr>
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
   </tbody>
  </table>  

上述代码效果如下：

运行结果

常用表格标签：

• 表头：<th>heading</th>
  例：

<table border="2"> 
    <tr> 
     <th>heading1</th> 
     <th>heading2</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</table>  

上述代码运行效果：

运行结果

• 表格标题：<caption>title</caption>
  例：

  <table border="2"> 
   <caption>
    title
   </caption> 
    <tr> 
     <th>heading1</th> 
     <th>heading2</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr>
 </table> 

上述代码效果如下：

运行结果

常用表格属性：

• 表格边框：<table border = "1">
  • 当不设置边框时默认为无边框
  • border的值越大，边框越粗

例：

  <table border="2"> 
   <tbody>
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr>
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
   </tbody>
  </table>   

运行结果

  <table border="8"> 
   <tbody>
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr>
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
   </tbody>
  </table>   

运行结果

• 跨行或跨列的表格：colspan/rowspan

  <table border="2"> 
   <caption>
     title 
   </caption> 
    <tr> 
     <th>heading1</th> 
     <th>heading2</th> 
    </tr> 
    <tr> 
     <td colspan="2">1</td> 
    </tr> 
    <tr> 
     <td rowspan="2">3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>5</td> 
    </tr> 
  </table> 

运行结果

• 单元格边距：cellpadding
  设置单元格边距和不设置的区别

  <table border="2" cellpadding="6"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
  </table> 
  <br /> 
  <table border="2"> 
   <tbody>
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
  </table>  

运行结果

• 单元格间距：cellspacing
  例：

<table border="2" cellspacing="6"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
  </table> 
  <br /> 
  <table border="2"> 
   <tbody>
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
  </table>  

运行结果