HTML基础教程之表格标签

表格标签

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







表格的结构

<table>

        <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

        </tr>

        <tr>

                <td></td>

                <td></td>

                <td></td>

                <td></td>

        </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="表格简介文本">

标题

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

语法:

<table>    <caption>标题文本</caption>
   <tr>
       <td>…</td>
       <td>…</td>
       …
   </tr>

</table>

实例:

<!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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!