HTML-表格

html表格介绍

表格使用<table>标签来定义，是双标签。

表格标签列表

标签 描述 <table> 定义表格 <caption> 定义表格标题 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元(列) <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 兴义表格的页脚 <col> 用于定义表格列的属性 <colgroup> 定义表格列的组

---

表格的组成

表格是由行(tr)、列(td)组成。

表格的作用

① 显示数据

② 网页布局

表格的属性

属性 描述 border 设置边框 width 设置宽度 height 设置高度 cellspacing 设置 td 与 td 之间的距离 ( 默认值是 2 ) cellpadding 设置 内容 与 td 之间的距离 align 设置对其方式：left、center、right bgcolor 设置背景颜色

<!--注意：1.如果给table标签设置align属性，只能让整个标签居中，内容不会居中2.给 tr 或者 td 设置 align 属性，可以让其内容居中-->

例题

1.创建一个没有边框的表格

 <!--创建一个没有边框的表格--> <table border="0">     <!--第一行-->     <tr>         <td>第一行第一列</td>         <td>第一行第二列</td>     </tr>     <!--第二行-->     <tr>         <td>第二行第一列</td>         <td>第二行第二列</td>     </tr> </table>

运行结果

---

2.给表格设置标题

<!--创建一个表格--><table width="400" border="1" cellpadding="1" cellspacing="1">    <!--表格标题-->    <caption>我是表格标题</caption>    <!--第一行-->    <tr>        <!--第一行第一列-->        <td>one</td>        <!--第一行第二列-->        <td>two</td>    </tr>    <!--第二行-->    <tr>        <!--第二行第一列-->        <td>one</td>        <!--第二行第二列-->        <td>two</td>    </tr></table>

运行结果

---

3.在上例的基础上，上表格与内容居中显示

<!--创建一个表格--><table width="400" border="1" cellpadding="1" cellspacing="1" align="center">    <!--表格标题-->    <caption>我是表格标题</caption>    <!--第一行-->    <tr align="center">        <!--第一行第一列-->        <td>one</td>        <!--第一行第二列-->        <td>two</td>    </tr>    <!--第二行-->    <tr align="center">        <!--第二行第一列-->        <td>one</td>        <!--第二行第二列-->        <td>two</td>    </tr></table>

运行效果

---

4.在上例的基础上，给表格和内容同时设置背景颜色

<!--创建一个表格背景色为红色，内容背景色为黄色和粉色的表格--><table width="400" border="1" cellpadding="1" cellspacing="1" align="center" bgcolor="red">    <!--表格标题-->    <caption>我是表格标题</caption>    <!--第一行-->    <tr align="center" bgcolor="yellow">        <!--第一行第一列-->        <td>one</td>        <!--第一行第二列-->        <td>two</td>    </tr>    <!--第二行-->    <tr align="center" bgcolor="#ffc0cb">        <!--第二行第一列-->        <td>one</td>        <!--第二行第二列-->        <td>two</td>    </tr></table>

运行结果

5.合并单元格-合并列

通过给<tr>标签设置colspan属性来实现合并列

    <table width="800" border="1" cellpadding="1" cellspacing="1">        <caption>合并单元格-合并列</caption>        <!--第一行-->        <tr align="center">            <td>第1行第1列</td>            <td>第1行第2列</td>            <td>第1行第3列</td>            <td>第1行第4列</td>            <td>第1行第5列</td>        </tr>        <!--第二行-->        <tr align="center">            <td>第2行第1列</td>            <td>第2行第2列</td>            <td colspan="2">第2行第3列</td>            <td>第2行第5列</td>        </tr>        <!--第三行-->        <tr align="center">            <td>第3行第1列</td>            <td>第3行第2列</td>            <td>第3行第3列</td>            <td>第3行第4列</td>            <td>第3行第5列</td>        </tr>    </table>

运行结果

---

6.单元格合并-合并行

通过给<tr>标签设置rowspan属性，实现行合并

    <!--        ① 创建一个三行五列的表格        ② 将第1行第一列与第二行第一列合并    -->    <table width="800" border="1" cellpadding="1" cellspacing="1">        <caption>合并单元格-合并列</caption>        <!--第一行-->        <tr align="center">            <td rowspan="2">第1行与第二行第1列</td>            <td>第1行第2列</td>            <td>第1行第3列</td>            <td>第1行第4列</td>            <td>第1行第5列</td>        </tr>        <!--第二行-->        <tr align="center">            <td>第2行第2列</td>            <td>第2行第3列</td>            <td>第2行第4列</td>            <td>第2行第5列</td>        </tr>        <!--第三行-->        <tr align="center">            <td>第3行第1列</td>            <td>第3行第2列</td>            <td>第3行第3列</td>            <td>第3行第4列</td>            <td>第3行第5列</td>        </tr>    </table>

运行结果

<!--表格的简单使用，就先整理这些，后期还会不定期的更新，如果有疑问，或不解，或有意见，可以添加QQ:510063983详聊-->