本文目录

• 1. 前言
• 2. 表格标签
• 3. 表格的行与列
• 4. 页眉
• 5. 页脚
• 6. 小结

1. 前言

表格有多重要我就不需要赘述了吧，我们日常访问的网页处处都有表格，所以表格是非常非常重要的HTML元素。

本篇我们就来简单介绍下表格的用法。

2. 表格标签

我们可以使用<table>标签来定义一个表格，然后使用border属性来设定表格边框的宽度，如下。

注意此时表格里面还没有内容，所以网页也显示不出什么东西来。

	<table border="1">

    </table>

3. 表格的行与列

HTML的表格是先编写行<tr>，然后在行里面编写列<td>，所以我们定义一个表格如下：

	<table border="1">
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
    </table>

这个表格首先有2行，即2个tr。然后每一行有两列，即两个td。所以效果如下：

4. 页眉

表格一般需要有标题，我们可以把标题放到页眉里面。页眉标签为thead，标题列的标签为th。所以带页眉标题的代码如下。

需要注意的是，定义页眉后，我们一般将行列放到表格的主体tbody标签内部，这样更加规范。

 	<table border="1">
        <thead>
            <th>姓名</th>
            <th>性别</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

效果如下，可见标题列字体是加粗的。

5. 页脚

表格还可以添加页脚，可以在页脚显示一些附加信息，例如学生的总数，页脚标签为tfoot。添加页脚后代码如下：

	<table border="1">
       <thead>
           <th>姓名</th>
           <th>性别</th>
       </thead>
       <tbody>
           <tr>
               <td>张三</td>
               <td>男</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>女</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>
                   学生总数:
               </td>
               <td>
                   2人
               </td>
           </tr>
       </tfoot>
   </table>

对应效果如下：

一般页脚用的比较少。

6. 小结

HTML表格主要表达了表格的内容，具体如何将表格做的好看，还得使用CSS，后续课程我们会对CSS样式进行讲解。

标签：JavaWeb,表格,页脚,标签,如下,HTML,页眉,21
来源： https://blog.csdn.net/woshisangsang/article/details/120653192