肖sir_html之表格標(biāo)簽

格標(biāo)簽：

table 表格標(biāo)簽

熟悉表格常用的單詞：
border 邊距，align 格式：‘ center’ 對齊，cellspacing 單元格與單元格的距離，cellpadding 單元格與內(nèi)容的距離，wedth 寬度，height 高度，tr 表示：行，th 表示：表頭，td ：表示列

編輯表格：

生成表格：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表頭–【居中/加粗】

table標(biāo)記的邊框–border

table標(biāo)記的寬度–width

table標(biāo)記的高度–height

table標(biāo)記的水平對齊方式–align

table標(biāo)記的表格背景色–bgcolor

table標(biāo)記的表格邊框色–bordercolor

table標(biāo)記的表格中的內(nèi)容與邊框之間的距離–cellpadding

table標(biāo)記的表格中的邊框與邊框之間的距離–cellspacing【默認(rèn)是1px】

tr標(biāo)記的align屬性–設(shè)置當(dāng)前行的水平對齊方式

tr標(biāo)記的bgcolor屬性–設(shè)置當(dāng)前行的背景色

tr標(biāo)記的valign屬性–設(shè)置當(dāng)前行的垂直對齊方式【top/middle/bottom】

td標(biāo)記的align屬性–設(shè)置當(dāng)前列的水平對齊方式

td標(biāo)記的bgcolor屬性–設(shè)置當(dāng)前列的背景色

td標(biāo)記的valign屬性–設(shè)置當(dāng)前列的垂直對齊方式【top/middle/bottom】

合并單元格

水平方向合并單元格–跨列—colspan

垂直方向合并單元格–跨行—rowspan
刪除多余的單元格*

以下是計算器的控制面板代碼

<!DOCTYPE html>

<html>

<head>

<title>計算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一項(xiàng)【條目】

默認(rèn)的標(biāo)志是有順序的數(shù)字

我們可以通過ol的type屬性來修改標(biāo)志

1–有順序的數(shù)字

a–有順序的小寫字母

A–有順序的大寫字母

i–有順序的小寫羅馬數(shù)字

I–有順序的大寫羅馬數(shù)字

start屬性設(shè)置書順序的開始值

2.2 無序列表

ul—無序列表

li—列表中的每一項(xiàng)【條目】

默認(rèn)的標(biāo)志是實(shí)心點(diǎn)

我們可以通過ul的type屬性來修改標(biāo)志

circle–圓形【。】

disc----實(shí)心點(diǎn)[默認(rèn)]

square–正方形

none–沒有標(biāo)志

2.3 自定義列表

dl—自定義列表

dt—自定義列表的頭

dd—子項(xiàng)目

以下是有序，無序，和自定義列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定義列表</dt>

</dl>

</body>

</html>

3. 表單<form>

主要負(fù)責(zé)采集信息的，可以將采集的信息提交。

form的屬性

action—指定表單數(shù)據(jù)的后端處理程序

method----指定表單數(shù)據(jù)的提交方式【get[默認(rèn)]/post】

get提交數(shù)據(jù)會將被處理的數(shù)據(jù)跟隨在請求地址之后

被提交的數(shù)據(jù)255個字符

https://www.baidu.com/s?&wd=html

post提交數(shù)據(jù)會將被處理的數(shù)據(jù)封裝到http協(xié)議的頭

https://www.baidu.com/s

被提交的數(shù)據(jù)沒有限制

通常情況下提交文件只能用post

enctype屬性規(guī)定在將表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對其進(jìn)行編碼。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在發(fā)送前對所有字符進(jìn)行編碼（默認(rèn)）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不對字符編碼。當(dāng)使用有文件上傳控件的表單時，該值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>將空格轉(zhuǎn)換為 "+" 符號，但不編碼特殊字符。</td>

</tr>

</table>

</body>

</html>

表單元素

input 文本框/密碼框/單選按鈕/復(fù)選框…

seletc 下拉列表

textarea 文本域—富文本編輯器

格語法:

注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的寬度大小(使用數(shù)字pixel或%)

<table border=""></table>設(shè)定表格邊框大小(使用數(shù)字pixel)

<table align=""></table>表格位置,置左,為默認(rèn)值

align屬性:left(左對齊表格，默認(rèn)值)、right(右對齊表格)、center(居中對齊表格)

<table bgcolor=""></table>設(shè)定表格的背景顏色

<table cellpadding=""></table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字pixel或%)

<table cellspacing=""></table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字pixel或%)

通常表格, 這兩個參數(shù)都設(shè)置為 0 。

<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。(兼容性差)

rules屬性:none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

定義了表格內(nèi)容的摘要：

表格結(jié)構(gòu)：

在使用表格進(jìn)行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：

<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標(biāo)記中, 一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。

<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后, 一般包含網(wǎng)頁底部的企業(yè)信息等。

<tbody></tbody>：用于定義表格的主體, 位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后, 一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標(biāo)記。

<table bordercolor=""></table>設(shè)定表格邊框的顏色

<table cols=""></table>指定表格的欄數(shù)

<table height=""></table>指定表格的高度大小(使用數(shù)字)

<table background=""></table>背景圖片的URL=就是路徑網(wǎng)址(默認(rèn)是repeat：水平和垂直方向重復(fù))

<table bordercolordark=""></table>設(shè)定表格暗邊框的顏色

<table bordercolorlight=""></table>設(shè)定表格亮邊框的顏色

<tr align=""></tr> 定義表格行的內(nèi)容對齊方式。

align屬性值:right、left、center、justify、char

<tr bgcolor=""></tr> 規(guī)定表格行的背景顏色。

<tr valign=""></tr> 規(guī)定表格行中內(nèi)容的垂直對齊方式。

valign屬性值right、left、center、justify、char

<td colspan=""></td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=""></td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<td align=""></td> 調(diào)整表格字段之左右對齊

<td bgcolor=""></td> 設(shè)定表格字段之背景顏色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 調(diào)整表格字段之上下對齊

<td width=""></td> 調(diào)整表格字段寬度

<td nowrap="nowrap"></td> 規(guī)定表格單元格中的內(nèi)容不換行(注意只有一個值:nowrap)

<caption></caption>為表格加上標(biāo)題

<caption align="">設(shè)定表格標(biāo)題位置

align屬性:left, center(默認(rèn)值), right

<th></th> 定義表頭(粗體居中)

細(xì)表格邊框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格創(chuàng)建后瀏覽器會自動添加<tbody>標(biāo)簽

在線咨詢

上一篇：HTML 簡單的<header> 標(biāo)簽
下一篇：HTML中嵌入視頻和音頻代碼

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

肖sir_html之表格標(biāo)簽

您的項(xiàng)目需求