HTML中的表格标签

255 阅读1分钟

(1)基本语法:

<table>
      <caption>表格标题</caption>
      <tr><th>列名一</th><th>列名二</th>…...</tr>
      <tr><td>数据一</td><td>数据二</td>…...</tr>
      ……
</table>

(2)表格属性:

属性用途
width表格宽度
height表格高度
align表格水平对齐方式
border表格边框厚度
bordercolor边框颜色
cellpadding边距
cellspacing间距
bgcolor表格背景颜色
background表格背景图像

(3)行属性:

属性用途
align行内容水平对齐方式
valign行内容的垂直对齐方式
bgcolor行的背景色

(4)单元格属性:

属性用途
width单元格宽度
height单元格高度
align单元格水平对齐方式
valign单元格内容的垂直对齐方式
colspan单元格跨列
rowspan单元格跨行
bgcolor表格背景颜色

例:设计如图所示的表格。

1.png
代码:

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title>表格标记举例</title> 
  </head>
  <body>
    <table width="70%" border="1" align="center">
      <tr> <th colspan="3">期中成绩表</th></tr>
      <tr> <th>姓名</th><th>语文</th> <th>数学</th></tr>
      <tr> <td>张三</td><td colspan="2">100</td></tr>
      <tr> <td>李四</td><td>98</td><td>43</td></tr>
      <tr> <td>王晓彬</td><td rowspan="2">97</td>  
             <td>78</td></tr>
      <tr> <td>成大才</td> <td>94</td> </tr>
    </table>
  </body>
</html>