Web培训

热门话题:

Web前端培训 > 零基础学Web > 正文

web前端培训-HTML 表格教程

发布：Web前端培训
来源：网络
时间：2018-05-23 18:41

HTML 表格

HTML 表格实例:

First NameLast NamePoints

JillSmith50

EveJackson94

JohnDoe80

AdamJohnson67

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

(可以在本页底端找到更多实例。)

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义)，每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

实例

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

实例

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <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>

在浏览器显示如下：

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

漂亮的表格

HTML 表格标签

标签描述

<table>定义表格

<th>定义表格的表头

<tr>定义表格的行

<td>定义表格单元

<caption>定义表格标题

<colgroup>定义表格列的组

<col>定义用于表格列的属性

<thead>定义表格的页眉

<tbody>定义表格的主体

<tfoot>定义表格的页脚

免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容

预约申请免费试听课

填写下面表单即可预约申请免费试听！怕学不会？助教全程陪读，随时解惑！担心就业？一地学习，可全国推荐就业！

上一篇：web前端开发中的HTML 图像教程

下一篇：渐进式Web应用(PWA)入门教程

相关推荐

: Web前端开发对技能的要求有哪些？

Web前端开发对技能的要求有哪些？Web前端开发对技能的要求主要包括以下几个方面：

: 初学者如何迅速学习Web前端开发？

初学者如何迅速学习Web前端开发？Web前端开发近年来学习的人也是在不断的增加，但是它不像其它的编程语言那样火一段时间然后消沉一段时间，Web前端开发一直是处于一个稳步上升的趋势，而且相关岗位的待遇也是不错的，早学习过程中一般初学者在学习Web前端的时候，都想要通过快速的方式学习，尽快的进入到行业中工作。

: 零基础Web前端学习路线图

移动互联网的快速发展让Web前端开发人员成为目前市场上紧俏、稀缺的人才，很多对于IT完全零基础的同学都想要学习前端。Web前端是一门涵盖面很广的学科。内容虽多，只要循序渐进就能学好Web前端！下面带大家了解零基础Web前端学习路线，首先了解一下什么是Web前端。