HTML基础教程之表格标签

表格标签

网页中有类似word里面的功能，当然，也会有类似excel里面的功能，表格就是其中之一

表格的结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<table>属性

Width：表格宽度，单位可以是百分比，也可以是固定值。
Height：表格高度。
Align：表格水平对齐方式，取值：left、center、right
Border：边框粗细。
Bordercolor：边框颜色。
bgColor：表格背景色。
background：背景图片URL。
cellpadding：单元格边线到内容间的距离(填充距离)
cellspacing：单元格与单元格之间的距离(间距)
rules：合并单元格边框线，取值：all

注意：rules兼容性不好，请使用CSS来取代它。

我们来实际画一个表格吧

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

<tr>属性——行标记

bgColor：行的背景色
height：行的高度
align：行中的文本水平居中，取值：left、center、right
valign：垂直居中，取值：top(上)、middle(中)、 bottom(下)

<td>或<th>属性

<td>是普通单元格，<th>是标题单元各，居中加粗显示。

width：单元格宽度
height：单元格高度
bgColor：单元格背景色
background：单元格背景图片
align：水平对齐
valign：垂直水齐
rowspan：上下单元格合并。合并属性必须放在第一个单元格中。
colspan：左右单元格合并。合并时，有增就得有减，要保证每一行单元格的个数不变。

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

注：属性是区分大小写的，bgColor如果写成bgcolor是没有效果的

大家可以将每个属性都输入，查看输出效果

caption标签

为表格添加标题和摘要

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

新建文件

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
 <tr>
 <td>工号</td>
 <td>姓名</td>
 <td>职位</td>
 </tr>
 <tr>
 <td>001</td>
 <td>小明</td>
 <td>设计师</td>
 </tr>
 <tr>
 <td>002</td>
 <td>小方</td>
 <td>工程师</td>
 </tr>
 <tr>
 <td>003</td>
 <td>小白</td>
 <td>程序员</td>
 </tr>
 </table> 
 </body>
</html>

提交重置代码

自动运行

全屏