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>


继续学习
||
<!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>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

HTML+CSS基础入门教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

Nelson

html不区分大小写,属性又区分大小写,有点气

6年前    添加回复 0

学习ing

caption标签为表格添加标题和摘要--这个以前没看见过啊,学习了

7年前    添加回复 0

我是灰太狼

理解了就很简单

7年前    添加回复 0

baby不要哭泣

cellspacing:单元格与单元格之间的距离(间距)

7年前    添加回复 0

看透不说透

表格的结构 <table> <tr> <td></td> <td></td> <td></td> </tr> </table> tr代表行 td代表单元格

7年前    添加回复 0

扔个三星炸死你

又混淆了

7年前    添加回复 0

rowspan和colspan怎么用呢,能不能举个例子。感觉没吃透

[最新 数据分析师 的回答] rowspan和colspan怎么用呢,能不能举个例子。感觉没吃透-PHP中文网问答-rowspan和colspan怎么用呢,能不能举个例子。感觉没吃透-PHP中文网问答围观一下哦,学习一下。

时间:7年前

caption标签跟title,h1等标签有啥区别?

[最新 数据分析师 的回答] caption标签跟title,h1等标签有啥区别?-PHP中文网问答-caption标签跟title,h1等标签有啥区别?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

td和th标签的用法区别在哪里?

[最新 数据分析师 的回答] td和th标签的用法区别在哪里?-PHP中文网问答-td和th标签的用法区别在哪里?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~