當前位置 : 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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.com)</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.oalvodamoda.com)</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)播放
五月情天