HTML表格

最新推荐文章于 2020-10-15 18:01:32 发布

thigdo

最新推荐文章于 2020-10-15 18:01:32 发布

阅读量461

点赞数

分类专栏： HTML 文章标签： html table border internet list apple

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML TABLE

表格由<table>来定义。

每个表格有若干行<tr>

每行被分割为若干单元格<td>

td(table data)即数据单元格的内容，可以包含文字、文本、图片、列表、段落、表单、水平线、表格等等

row 1,cell 1	row 1,cell 2
row 2,cell 1	row 2,cell 2

以上表格的源代码如下：

<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>

表格的表头

<th>

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

源代码如下

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

表格中若有空单元格，可在空单元格中加一个 空格占位符:  

其它实例

1. 带有标题的表格<caption>

我的标题
100	200	300
400	500	600

<html>
<body>
<h4>The table has a caption and thick frame:</h4>
<table border = "6">
<caption>My caption</caption>
<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>

2. 跨行或跨列的表格单元格

横跨两列的单元格：

Name	Tel
Bill Gates	555 77 854	555 77 855

横跨两行的单元格：

Name	Bill Gates
Tel	555 77 854

横跨两列的单元格：<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Tel</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
横跨两行的单元格
<table border="1">
<tr>
<th>Name</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Tel</th>
<td>555 77 854</td>
</tr>
</table>

3. 表格内的标签

This is a paragraph.

This is another paragraph.

This unit contains a table

A	B
C	D

This unit contains a list:

Apple
Banana
Pineapple

Hello

Code:

<table border="1">
<tr>
<td>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
</td>
<td>This unit contains a table
 <table border="1">
 <tr>
  <td>A</td>
  <td>B</td>
 </tr>
 <tr>
  <td>C</td>
  <td>D</td>
 </tr>
 </table>
</td>
</tr>
<tr>
 <td>This unit contains a list:
  <ul>
   <li>Apple</li>
   <li>Banana</li>
   <li>Pineapple</li>
  </ul>
 </td>
 <td>Hello</td>
</tr>
</table>

4. 单元格边距

No cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

<h4>No cellpadding:</h4>
<table border="1">
<tr>
 <td>First</td>
 <td>Row</td>
</tr>
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>


<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
 <td>First</td>
 <td>Row</td>
</tr>
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>

5. 单元间隔距（cellspacing）

With cellspacing:

First	Row
Second	Row

<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
 <td>First</td>
 <td>Row</td>
</tr>
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>

6. 向表格添加背景颜色或图像

7.向表格单元格添加背景颜色或图像

<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="/i/eg_bg.gif">Second</td>
<td>Row</td>
</tr>
</table>

8. 在表格单元中排列内容

Consumed item...	January	February
Clothes	$241.10	$50.20
Makeup	$30.00	$44.45
Food	$730.40	$650.00
Total	$1001.50	$744.65

<table width="400" border="1">
<tr>
<th align="left">Consumed item...</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Makeup</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Total</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

9. Frame属性

Comment:frame 属性无法在Internet Explore中正确的显示

Table with frame="box":

Month	Savings
January	$100

Table with frame="above":

Month	Savings
January	$100

Table with frame="below":

Month	Savings
January	$100

Table with frame="hsides":

Month	Savings
January	$100

Table with frame="vsides":

Month	Savings
January	$100

<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

thigdo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

HTML TABLE表格由来定义。每个表格有若干行每行被分割为若干单元格td(table data)即数据单元格的内容，可以包含文字、文本、图片、列表、段落、表单、水平线、表格等等row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2以上
复制链接

扫一扫