首页>>网站建设>>HTML>>基础教程>>

HTML基础教程（十一）表格

发布时间：2019-12-18点击：

HTML表格

在HTML中如果想要创建表格，我们有专门的完善的表格标签来实现，那就是table标签，这是一个闭合标签。

在HTML表格中，会将表格分为若干行，在把每行分为若干单元格，也就是列，然后单元格内就可以存放我们操作EXCEL时所需要存放的数据，也可以是图片、列表、段落、表单、水平线一个嵌套表格等。

一、定义语法

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在HTML表格中最大的闭合标签就是<table>，其所有的子标签需要在<table>标签中。

1、其中<tr>标签定义的是行，<td>定义的是列，也就是单元格；

2、上述代码中有两个<tr>闭合标签，意思就是说定义了一个表格有两行；在<tr>标签中有两个<td>标签，也就是说一行有两个单元格.

显示如下：

row1,cell1	row1,cell2
row2,cell1	row2,cell2

3、在HTML表格中，每行可以单独定义有多少个单元格，它与其他行互不干涉。

二、表格其他属性

标签	作用
<table>	定义表格
<tr>	定义表格的行
<td>	定义表格的单元格
<th>	定义表格的表头（文本加粗居中），与<td>用法相同
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

三、实例应用

代码：

<html>
<head>
<meta charset='utf-8'>
<title>HTML表格实例应用</title>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th>名字</th><th>年纪</th><th>工作</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>张三</td><td>18</td><td>教师</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>李四</td><td>26</td><td>工人</td>
    </tr>
    <tr>
      <td>王五</td> <td>30</td><td>律师</td>
    </tr>
  </tbody>
</table>
</body>
</html>

显示如下：