当前位置 : IT培训网 > Web前端 > Web教程 > 如何制作html表格

如何制作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.cnitedu.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.cnitedu.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.cnitedu.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.cnitedu.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.cnitedu.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>

运行结果:

这是一个段落

这是另一个段落

这个单元格包含一个表格:

A

B

C

D

这个单元格包含一个列表

  • apples
  • bananas
  • pineapples

HELLO

 

6、单元格边距(Cell padding)

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

源文件:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培训网(www.cnitedu.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.cnitedu.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%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放