基本使用方法

image.png

是表头单元格，会让单元格内的文字居中加粗显示。

属性

image.png
title 属性：当鼠标光标悬停在表格上时会有提示

cellspacing可以消除单元格多余的空白

单元格的合并

image.png
image.png

实战演示

  1.     <table border="1" width="400" height="500" cellspacing="0" align="center">
  2.         <thead>
  3.         <tr><th>姓名</th><th colspan="2">父母</th></tr>
  4.         </thead>
  5.         <tbody>
  6.             <tr><td>陆俊</td><td>王华</td><td>陆保兵</td></tr>
  7.             <tr><td>陆俊</td><td>王华</td><td>陆保兵</td></tr>
  8.             <tr><td>陆俊</td><td>王华</td><td>陆保兵</td></tr>
  9.             <tr><td>陆俊</td><td>王华</td><td>陆保兵</td></tr>
  10.         </tbody>
  11.     </table>

image.png

如果不加来修饰的话，表头的高度会和普通的一样高，效果如下：
image.png

<caption>学生信息表</caption>

为表格添加名称

表格自带属性介绍

<body>
  <form action="#">
    <table cellpadding="40px" border="1">
      <tr><td>24</td><td>陆 俊</td><td>好 帅</td></tr>
    </table>
  </form>
</body>

image.png

  • cellpadding：单元格内容与边框之间的内容；
  • border：单元格的单个边框。