HTML中的表格元素介紹
我要評論表格元素的作用：用來格式化顯示數(shù)據(jù)。
一、表格的基本結構
表格的基本語法:
<TABLE border="設置表格邊框尺寸大小" width="" cellpadding="" cellspaning="">
<TR align="對齊方式">
<TD align="">
單元格內容
</TD>
......
</TR>
......
</TABLE>
<TABLE></TABLE>:定義表格
<TR></TR>:定義行
<TD></TD>：定義列
示例：
主要屬性：
border:邊框的寬度，單位是像素（缺省值是0）
width：表格的寬度，可以用百分比（表示該表格占父標記的寬度），也可以是絕對值
cellpadding:單元格內容與單元格之間的空隙
cellspacing:單元格與單元格之間的空隙
align:對齊方式，值有"center","right","left"
colspan：水平方向延伸單元格，值為一正整數(shù)，代表此單元格水平延伸的單元格數(shù)
rowspan：垂直方向延伸單元格，值為一正整數(shù)，代表此單元格垂直延伸的單元格數(shù)。
<caption>表格的題注：caption元素必須包含在table元素中，而且必須緊跟在<table>的開始標記之后，默認居中顯示。
語法
開始標記：必須
內容：行內標記
結束標記：必需
主要屬性：
align屬性：用以確定題注的位置，可以有五種取值
bottom、center、laft、right、top
例如：定義一個基本的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
結果：
二、表格美化
1、設置表格的尺寸和邊框
width:用來設置表格的寬度
height:用來設置表格的高度
border：用來設置表格邊框尺寸大小
bordercolor：用來設置表格邊框顏色
<table width="400" height="200" border="15" bordercolor="red">
<tr>
<td colspan="4" align="center">品牌商城</td>
</tr>
<tr>
<td colspan="2">筆記本電腦</td>
<td colspan="2">辦公設置、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>華碩</td>
<td>打印機</td>
<td>刻錄盤</td>
</tr>
</table>
示例：
2、設置背景圖片和背景色
background：屬性用來設置表格的背景圖片
bgcolor：屬性用來設置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一種顏色值，RGB指的是紅綠藍
<table width="360" height="120" border="2" background="Images\img.jpg">
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="3">筆記本電腦</td>
<td colspan="3" bgcolor="yellow">辦公設備、文具、耗材</td>
</tr>
<tr>
<td>IBM</td>
<td>惠普</td>
<td>華碩</td>
<td>打印機</td>
<td>刻錄盤</td>
<td>墨盒</td>
</tr>
</table>
示例：
3、設置對齊方式
align：屬性用來設置表格、行、列的對齊方式。
有三種取值
- left：居左對齊 默認
- right：居右對齊
- center：居中對齊
示例：
4、填充屬性和間距屬性
cellpadding:單元格填充，用來設置表格內填充距離，表示每一個單元格的厚度，值越大，單元格內容離單元格距離就越大
cellspacing:單元格間距，用來設置表格內框寬度,表示兩個單元格之間的距離。值越大，單元格與單元格之間的距離就越大
填充屬性和間距屬性：
<body>
<table border="20" cellpadding="30" cellspacing="40" bordercolor="red">
<tr bordercolor="green">
<td colspan="4">品牌商城</td>
</tr>
<tr>
<td colspan="2">筆記本電腦</td>
<td colspan="2">辦公設備、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>華碩</td>
<td>打印機</td>
<td>刻錄盤</td>
</tr>
</table>
</body>
示例：
設置表格的填充屬性示例：
5、設置跨行、跨列的表格
colspan：水平方向延伸單元格，值為一正整數(shù)，代表此單元格水平延伸的單元格數(shù)
rowspan：垂直方向延伸單元格，值為一正整數(shù)，代表此單元格垂直延伸的單元格數(shù)。
設置跨多列的表格：
設置跨多行的表格：
設置跨多行多列的表格：
注意：
跨行和跨列都是寫在<td>標簽里面。
6、表格的分組標簽
表格分組如下圖所示：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<caption>年終數(shù)據(jù)報表</caption>
<thead bgcolor="#99FFFF">
<tr>
<th>月份</th>
<th>收入</th>
</tr>
</thead>
<tbody bgcolor="#009966">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>80</td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>400</td>
</tr>
<tr>
<td>5月</td>
<td>100</td>
</tr>
<tr>
<td>6月</td>
<td>200</td>
</tr>
</tbody>
<tfoot bgcolor="#FFFF00">
<tr>
<td>平均月收入</td>
<td>196.67</td>
</tr>
<tr>
<td>總計</td>
<td>1180</td>
</tr>
</tfoot>
</table>
</body>
</html>
結果：
到此這篇關于HTML表格元素的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-31
這篇文章主要介紹了詳解html中表格table的行列合并問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-07-28- 這篇文章主要介紹了HTML頁面自適應寬度的table(表格),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2020-06-16
- 這篇文章主要介紹了html做表格只顯示表格的外邊框，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-20
- 做網(wǎng)頁的時候，經(jīng)常會碰到表格寬度對不齊的問題，遇到這種問題怎么處理呢？下面小編給大家介紹下html 表格單元格的寬度和高度的設置方法，一起看看吧2018-08-09
- 這篇文章主要介紹了html中table表格的內容水平和垂直居中顯示的相關資料,需要的朋友可以參考下2017-03-27
- 用table標簽在Web上顯示表格內容是HTML所具有的最基本功能之一,這里我們就來看一下HTML中table表格標簽的基礎學習教程,需要的朋友可以參考下2016-07-08
- 這篇文章主要為大家詳細介紹了HTML表格布局簡單實例，HTML表格布局是HTML入門學習中的基礎知識，感興趣的小伙伴們可以參考一下2016-05-05
- 這篇文章主要介紹了HTML表格布局實際使用詳解,是HTML入門學習中的基礎知識,需要的朋友可以參考下2015-07-28
- 本文為大家介紹下html的網(wǎng)頁元素的基本知識，以一個簡單的網(wǎng)頁表格示例為大家演示下，需要了解的朋友可以參考下哈2013-08-05
