IT培训网 - IT职场人学IT技术上IT培训网
如何制作html表格
时间：2016-11-25 17:15:08 来源：web前端培训网 作者：IT培训网 已有：名学员访问该课程
在html中制作表格的方法你学会了吗，其实 html表格并不难，只要我们掌握几个代码就可以了，如果你还不会，那就多看几个实例来学习下吧！
虽然网页中已经很少用到表格来做了，可有些内容还是少不了表格的，毕竟每一种代码都有自身的好处，下面我们就来看看如何在html中制作表格吧！
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格标签
|
标签 |
描述 |
|
<table> |
定义表格 |
|
<th> |
定义表格的表头 |
|
<tr> |
定义表格的行 |
|
<td> |
定义表格单元 |
|
<caption> |
定义表格标题 |
|
<colgroup> |
定义表格列的组 |
|
<col> |
定义用于表格列的属性 |
|
<thead> |
定义表格的页眉 |
|
<tbody> |
定义表格的主体 |
|
<tfoot> |
定义表格的页脚 |
表格实例
<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>
在浏览器显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
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>
在浏览器显示如下：
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
更多例子介绍：
1、没有边框的表格
本例演示一个没有边框的表格。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>这个表格没有边框:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
运行结果：
这个表格没有边框:
100 200 300
400 500 600
这个表格没有边框:
100 200 300
400 500 600
2、表格中的表头(Heading)
本例演示如何显示表格表头。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>水平标题:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直标题:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
运行结果：
水平标题:
|
Name |
Telephone |
Telephone |
|
Bill Gates |
555 77 854 |
555 77 855 |
垂直标题:
|
First Name: |
Bill Gates |
|
Telephone: |
555 77 854 |
|
Telephone: |
555 77 855 |
3、带有标题的表格
本例演示一个带标题 (caption) 的表格
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
运行结果：
|
Monthly savings |
|
|
Month |
Savings |
|
January |
$100 |
|
February |
$50 |
4、跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>单元格跨两格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
运行结果：
|
Name |
Telephone |
|
|
Bill Gates |
555 77 854 |
555 77 855 |
单元格跨两列:
|
First Name: |
Bill Gates |
|
Telephone: |
555 77 854 |
|
555 77 855 |
5、表格内的标签
本例演示如何显示在不同的元素内显示元素。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
运行结果：
|
这是一个段落 这是另一个段落 |
这个单元格包含一个表格:
|
||||
|
这个单元格包含一个列表
|
HELLO |
6、单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>没有单元格边距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
运行结果：
没有单元格边距:
|
First |
Row |
|
Second |
Row |
有单元格边距:
|
First |
Row |
|
Second |
Row |
7、单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>没有单元格间距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
运行结果：
没有单元格间距:
|
First |
Row |
|
Second |
Row |
单元格间距="0":
|
First |
Row |
|
Second |
Row |
单元格间距="10":
|
First |
Row |
|
Second |
Row |
在html中制作表格的方法你学会了吗，其实 html表格并不难，只要我们掌握几个代码就可以了，如果你还不会，那就多看几个实例来学习下吧！
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
菜鸟学Java开发的流程有哪
报读Java培训班如何掌握
怎么样了解Java发展史
甲骨文和谷歌之间关于 
C 语言成了大哥 连Python都
2021年IT行业就业前景如何
程序员这个职业谁能做一
大龄程序员真的就那么不
学IT技术高薪还不加班 我
半路转行学编程还能成为