文作為一個純CSS3實現(xiàn)網(wǎng)格的示例,在不使用table標簽,僅僅利用div標簽及flex布局,用flexbox及相關(guān)屬性來實現(xiàn)一個帶有表頭和頁眉的跨行、跨列的表格。
廢話不多講,直接上代碼:
CSS代碼如下:
HTML代碼如下:
效果圖如下:
SED單行腳本快速參考(Unix 流編輯器)
在以下地址可找到本文檔的最新(英文)版本:
http://sed.sourceforge.net/sed1line.txt
http://www.pement.org/sed/sed1line.txt
中文 - http://sed.sourceforge.net/sed1line_zh-CN.html
文本間隔:
--------
# 在每一行后面增加一空行
sed G
# 將原來的所有空行刪除并在每一行后面增加一空行。
# 這樣在輸出的文本中每一行后面將有且只有一空行。
sed '/^$/d;G'
# 在每一行后面增加兩行空行
sed 'G;G'
# 將第一個腳本所產(chǎn)生的所有空行刪除(即刪除所有偶數(shù)行)
sed 'n;d'
# 在匹配式樣“regex”的行之前插入一空行
sed '/regex/{x;p;x;}'
# 在匹配式樣“regex”的行之后插入一空行
sed '/regex/G'
# 在匹配式樣“regex”的行之前和之后各插入一空行
sed '/regex/{x;p;x;G;}'
編號:
--------
# 為文件中的每一行進行編號(簡單的左對齊方式)。這里使用了“制表符”
# (tab,見本文末尾關(guān)于'\t'的用法的描述)而不是空格來對齊邊緣。
sed = filename | sed 'N;s/\n/\t/'
# 對文件中的所有行編號(行號在左,文字右端對齊)。
sed = filename | sed 'N; s/^/ /; s/ *\(.\{6,\}\)\n/ /'
# 對文件中的所有行編號,但只顯示非空白行的行號。
sed '/./=' filename | sed '/./N; s/\n/ /'
# 計算行數(shù) (模擬 "wc -l")
sed -n '$='
文本轉(zhuǎn)換和替代:
--------
# Unix環(huán)境:轉(zhuǎn)換DOS的新行符(CR/LF)為Unix格式。
sed 's/.$//' # 假設(shè)所有行以CR/LF結(jié)束
sed 's/^M$//' # 在bash/tcsh中,將按Ctrl-M改為按Ctrl-V
sed 's/\x0D$//' # ssed、gsed 3.02.80,及更高版本
# Unix環(huán)境:轉(zhuǎn)換Unix的新行符(LF)為DOS格式。
sed "s/$/`echo -e \\r`/" # 在ksh下所使用的命令
sed 's/$'"/`echo \\r`/" # 在bash下所使用的命令
sed "s/$/`echo \\r`/" # 在zsh下所使用的命令
sed 's/$/\r/' # gsed 3.02.80 及更高版本
# DOS環(huán)境:轉(zhuǎn)換Unix新行符(LF)為DOS格式。
sed "s/$//" # 方法 1
sed -n p # 方法 2
# DOS環(huán)境:轉(zhuǎn)換DOS新行符(CR/LF)為Unix格式。
# 下面的腳本只對UnxUtils sed 4.0.7 及更高版本有效。要識別UnxUtils版本的
# sed可以通過其特有的“--text”選項。你可以使用幫助選項(“--help”)看
# 其中有無一個“--text”項以此來判斷所使用的是否是UnxUtils版本。其它DOS
# 版本的的sed則無法進行這一轉(zhuǎn)換。但可以用“tr”來實現(xiàn)這一轉(zhuǎn)換。
sed "s/\r//" infile >outfile # UnxUtils sed v4.0.7 或更高版本
tr -d \r outfile # GNU tr 1.22 或更高版本
# 將每一行前導(dǎo)的“空白字符”(空格,制表符)刪除
# 使之左對齊
sed 's/^[ \t]*//' # 見本文末尾關(guān)于'\t'用法的描述
# 將每一行拖尾的“空白字符”(空格,制表符)刪除
sed 's/[ \t]*$//' # 見本文末尾關(guān)于'\t'用法的描述
# 將每一行中的前導(dǎo)和拖尾的空白字符刪除
sed 's/^[ \t]*//;s/[ \t]*$//'
# 在每一行開頭處插入5個空格(使全文向右移動5個字符的位置)
sed 's/^/ /'
# 以79個字符為寬度,將所有文本右對齊
sed -e :a -e 's/^.\{1,78\}$/ &/;ta' # 78個字符外加最后的一個空格
# 以79個字符為寬度,使所有文本居中。在方法1中,為了讓文本居中每一行的前
# 頭和后頭都填充了空格。 在方法2中,在居中文本的過程中只在文本的前面填充
# 空格,并且最終這些空格將有一半會被刪除。此外每一行的后頭并未填充空格。
sed -e :a -e 's/^.\{1,77\}$/ & /;ta' # 方法1
sed -e :a -e 's/^.\{1,77\}$/ &/;ta' -e 's/\( *\)//' # 方法2
# 在每一行中查找字串“foo”,并將找到的“foo”替換為“bar”
sed 's/foo/bar/' # 只替換每一行中的第一個“foo”字串
sed 's/foo/bar/4' # 只替換每一行中的第四個“foo”字串
sed 's/foo/bar/g' # 將每一行中的所有“foo”都換成“bar”
sed 's/\(.*\)foo\(.*foo\)/bar/' # 替換倒數(shù)第二個“foo”
sed 's/\(.*\)foo/bar/' # 替換最后一個“foo”
# 只在行中出現(xiàn)字串“baz”的情況下將“foo”替換成“bar”
sed '/baz/s/foo/bar/g'
# 將“foo”替換成“bar”,并且只在行中未出現(xiàn)字串“baz”的情況下替換
sed '/baz/!s/foo/bar/g'
# 不管是“scarlet”“ruby”還是“puce”,一律換成“red”
sed 's/scarlet/red/g;s/ruby/red/g;s/puce/red/g' #對多數(shù)的sed都有效
gsed 's/scarlet\|ruby\|puce/red/g' # 只對GNU sed有效
# 倒置所有行,第一行成為最后一行,依次類推(模擬“tac”)。
# 由于某些原因,使用下面命令時HHsed v1.5會將文件中的空行刪除
sed '1!G;h;$!d' # 方法1
sed -n '1!G;h;$p' # 方法2
# 將行中的字符逆序排列,第一個字成為最后一字,……(模擬“rev”)
sed '/\n/!G;s/\(.\)\(.*\n\)/&/;//D;s/.//'
# 將每兩行連接成一行(類似“paste”)
sed '$!N;s/\n/ /'
# 如果當(dāng)前行以反斜杠“\”結(jié)束,則將下一行并到當(dāng)前行末尾
# 并去掉原來行尾的反斜杠
sed -e :a -e '/\$/N; s/\\n//; ta'
# 如果當(dāng)前行以等號開頭,將當(dāng)前行并到上一行末尾
# 并以單個空格代替原來行頭的“=”
sed -e :a -e '$!N;s/\n=/ /;ta' -e 'P;D'
# 為數(shù)字字串增加逗號分隔符號,將“1234567”改為“1,234,567”
gsed ':a;s/\B[0-9]\{3\}\>/,&/;ta' # GNU sed
sed -e :a -e 's/\(.*[0-9]\)\([0-9]\{3\}\)/,/;ta' # 其他sed
# 為帶有小數(shù)點和負號的數(shù)值增加逗號分隔符(GNU sed)
gsed -r ':a;s/(^|[^0-9.])([0-9]+)([0-9]{3})/,/g;ta'
# 在每5行后增加一空白行 (在第5,10,15,20,等行后增加一空白行)
gsed '0~5G' # 只對GNU sed有效
sed 'n;n;n;n;G;' # 其他sed
選擇性地顯示特定行:
--------
# 顯示文件中的前10行 (模擬“head”的行為)
sed 10q
# 顯示文件中的第一行 (模擬“head -1”命令)
sed q
# 顯示文件中的最后10行 (模擬“tail”)
sed -e :a -e '$q;N;11,$D;ba'
# 顯示文件中的最后2行(模擬“tail -2”命令)
sed '$!N;$!D'
# 顯示文件中的最后一行(模擬“tail -1”)
sed '$!d' # 方法1
sed -n '$p' # 方法2
# 顯示文件中的倒數(shù)第二行
sed -e '$!{h;d;}' -e x # 當(dāng)文件中只有一行時,輸入空行
sed -e '1{$q;}' -e '$!{h;d;}' -e x # 當(dāng)文件中只有一行時,顯示該行
sed -e '1{$d;}' -e '$!{h;d;}' -e x # 當(dāng)文件中只有一行時,不輸出
# 只顯示匹配正則表達式的行(模擬“grep”)
sed -n '/regexp/p' # 方法1
sed '/regexp/!d' # 方法2
# 只顯示“不”匹配正則表達式的行(模擬“grep -v”)
sed -n '/regexp/!p' # 方法1,與前面的命令相對應(yīng)
sed '/regexp/d' # 方法2,類似的語法
# 查找“regexp”并將匹配行的上一行顯示出來,但并不顯示匹配行
sed -n '/regexp/{g;1!p;};h'
# 查找“regexp”并將匹配行的下一行顯示出來,但并不顯示匹配行
sed -n '/regexp/{n;p;}'
# 顯示包含“regexp”的行及其前后行,并在第一行之前加上“regexp”所
# 在行的行號 (類似“grep -A1 -B1”)
sed -n -e '/regexp/{=;x;1!p;g;$!N;p;D;}' -e h
# 顯示包含“AAA”、“BBB”或“CCC”的行(任意次序)
sed '/AAA/!d; /BBB/!d; /CCC/!d' # 字串的次序不影響結(jié)果
# 顯示包含“AAA”、“BBB”和“CCC”的行(固定次序)
sed '/AAA.*BBB.*CCC/!d'
# 顯示包含“AAA”“BBB”或“CCC”的行 (模擬“egrep”)
sed -e '/AAA/b' -e '/BBB/b' -e '/CCC/b' -e d # 多數(shù)sed
gsed '/AAA\|BBB\|CCC/!d' # 對GNU sed有效
# 顯示包含“AAA”的段落 (段落間以空行分隔)
# HHsed v1.5 必須在“x;”后加入“G;”,接下來的3個腳本都是這樣
sed -e '/./{H;$!d;}' -e 'x;/AAA/!d;'
# 顯示包含“AAA”“BBB”和“CCC”三個字串的段落 (任意次序)
sed -e '/./{H;$!d;}' -e 'x;/AAA/!d;/BBB/!d;/CCC/!d'
# 顯示包含“AAA”、“BBB”、“CCC”三者中任一字串的段落 (任意次序)
sed -e '/./{H;$!d;}' -e 'x;/AAA/b' -e '/BBB/b' -e '/CCC/b' -e d
gsed '/./{H;$!d;};x;/AAA\|BBB\|CCC/b;d' # 只對GNU sed有效
# 顯示包含65個或以上字符的行
sed -n '/^.\{65\}/p'
# 顯示包含65個以下字符的行
sed -n '/^.\{65\}/!p' # 方法1,與上面的腳本相對應(yīng)
sed '/^.\{65\}/d' # 方法2,更簡便一點的方法
# 顯示部分文本——從包含正則表達式的行開始到最后一行結(jié)束
sed -n '/regexp/,$p'
# 顯示部分文本——指定行號范圍(從第8至第12行,含8和12行)
sed -n '8,12p' # 方法1
sed '8,12!d' # 方法2
# 顯示第52行
sed -n '52p' # 方法1
sed '52!d' # 方法2
sed '52q;d' # 方法3, 處理大文件時更有效率
# 從第3行開始,每7行顯示一次
gsed -n '3~7p' # 只對GNU sed有效
sed -n '3,${p;n;n;n;n;n;n;}' # 其他sed
# 顯示兩個正則表達式之間的文本(包含)
sed -n '/Iowa/,/Montana/p' # 區(qū)分大小寫方式
選擇性地刪除特定行:
--------
# 顯示通篇文檔,除了兩個正則表達式之間的內(nèi)容
sed '/Iowa/,/Montana/d'
# 刪除文件中相鄰的重復(fù)行(模擬“uniq”)
# 只保留重復(fù)行中的第一行,其他行刪除
sed '$!N; /^\(.*\)\n$/!P; D'
# 刪除文件中的重復(fù)行,不管有無相鄰。注意hold space所能支持的緩存
# 大小,或者使用GNU sed。
sed -n 'G; s/\n/&&/; /^\([ -~]*\n\).*\n/d; s/\n//; h; P'
# 刪除除重復(fù)行外的所有行(模擬“uniq -d”)
sed '$!N; s/^\(.*\)\n$//; t; D'
# 刪除文件中開頭的10行
sed '1,10d'
# 刪除文件中的最后一行
sed '$d'
# 刪除文件中的最后兩行
sed 'N;$!P;$!D;$d'
# 刪除文件中的最后10行
sed -e :a -e '$d;N;2,10ba' -e 'P;D' # 方法1
sed -n -e :a -e '1,10!{P;N;D;};N;ba' # 方法2
# 刪除8的倍數(shù)行
gsed '0~8d' # 只對GNU sed有效
sed 'n;n;n;n;n;n;n;d;' # 其他sed
# 刪除匹配式樣的行
sed '/pattern/d' # 刪除含pattern的行。當(dāng)然pattern
# 可以換成任何有效的正則表達式
# 刪除文件中的所有空行(與“grep '.' ”效果相同)
sed '/^$/d' # 方法1
sed '/./!d' # 方法2
# 只保留多個相鄰空行的第一行。并且刪除文件頂部和尾部的空行。
# (模擬“cat -s”)
sed '/./,/^$/!d' #方法1,刪除文件頂部的空行,允許尾部保留一空行
sed '/^$/N;/\n$/D' #方法2,允許頂部保留一空行,尾部不留空行
# 只保留多個相鄰空行的前兩行。
sed '/^$/N;/\n$/N;//D'
# 刪除文件頂部的所有空行
sed '/./,$!d'
# 刪除文件尾部的所有空行
sed -e :a -e '/^\n*$/{$d;N;ba' -e '}' # 對所有sed有效
sed -e :a -e '/^\n*$/N;/\n$/ba' # 同上,但只對 gsed 3.02.*有效
# 刪除每個段落的最后一行
sed -n '/^$/{p;h;};/./{x;/./p;}'
特殊應(yīng)用:
--------
# 移除手冊頁(man page)中的nroff標記。在Unix System V或bash shell下使
# 用'echo'命令時可能需要加上 -e 選項。
sed "s/.`echo \\b`//g" # 外層的雙括號是必須的(Unix環(huán)境)
sed 's/.^H//g' # 在bash或tcsh中, 按 Ctrl-V 再按 Ctrl-H
sed 's/.\x08//g' # sed 1.5,GNU sed,ssed所使用的十六進制的表示方法
# 提取新聞組或 e-mail 的郵件頭
sed '/^$/q' # 刪除第一行空行后的所有內(nèi)容
# 提取新聞組或 e-mail 的正文部分
sed '1,/^$/d' # 刪除第一行空行之前的所有內(nèi)容
# 從郵件頭提取“Subject”(標題欄字段),并移除開頭的“Subject:”字樣
sed '/^Subject: */!d; s///;q'
# 從郵件頭獲得回復(fù)地址
sed '/^Reply-To:/q; /^From:/h; /./d;g;q'
# 獲取郵件地址。在上一個腳本所產(chǎn)生的那一行郵件頭的基礎(chǔ)上進一步的將非電郵
# 地址的部分剃除。(見上一腳本)
sed 's/ *(.*)//; s/>.*//; s/.*[:<] *//'
# 在每一行開頭加上一個尖括號和空格(引用信息)
sed 's/^/> /'
# 將每一行開頭處的尖括號和空格刪除(解除引用)
sed 's/^> //'
# 移除大部分的HTML標簽(包括跨行標簽)
sed -e :a -e 's/<[^>]*>//g;/
# 將分成多卷的uuencode文件解碼。移除文件頭信息,只保留uuencode編碼部分。
# 文件必須以特定順序傳給sed。下面第一種版本的腳本可以直接在命令行下輸入;
# 第二種版本則可以放入一個帶執(zhí)行權(quán)限的shell腳本中。(由Rahul Dhesi的一
# 個腳本修改而來。)
sed '/^end/,/^begin/d' file1 file2 ... fileX | uudecode # vers. 1
sed '/^end/,/^begin/d' "$@" | uudecode # vers. 2
# 將文件中的段落以字母順序排序。段落間以(一行或多行)空行分隔。GNU sed使用
# 字元“\v”來表示垂直制表符,這里用它來作為換行符的占位符——當(dāng)然你也可以
# 用其他未在文件中使用的字符來代替它。
sed '/./{H;d;};x;s/\n/={NL}=/g' file | sort | sed '1s/={NL}=//;s/={NL}=/\n/g'
gsed '/./{H;d};x;y/\n/\v/' file | sort | sed '1s/\v//;y/\v/\n/'
# 分別壓縮每個.TXT文件,壓縮后刪除原來的文件并將壓縮后的.ZIP文件
# 命名為與原來相同的名字(只是擴展名不同)。(DOS環(huán)境:“dir /b”
# 顯示不帶路徑的文件名)。
echo @echo off >zipup.bat
dir /b *.txt | sed "s/^\(.*\)\.TXT/pkzip -mo .TXT/" >>zipup.bat
使用SED:Sed接受一個或多個編輯命令,并且每讀入一行后就依次應(yīng)用這些命令。
當(dāng)讀入第一行輸入后,sed對其應(yīng)用所有的命令,然后將結(jié)果輸出。接著再讀入第二
行輸入,對其應(yīng)用所有的命令……并重復(fù)這個過程。上一個例子中sed由標準輸入設(shè)
備(即命令解釋器,通常是以管道輸入的形式)獲得輸入。在命令行給出一個或多
個文件名作為參數(shù)時,這些文件取代標準輸入設(shè)備成為sed的輸入。sed的輸出將被
送到標準輸出(顯示器)。因此:
cat filename | sed '10q' # 使用管道輸入
sed '10q' filename # 同樣效果,但不使用管道輸入
sed '10q' filename > newfile # 將輸出轉(zhuǎn)移(重定向)到磁盤上
要了解sed命令的使用說明,包括如何通過腳本文件(而非從命令行)來使用這些命
令,請參閱《sed & awk》第二版,作者Dale Dougherty和Arnold Robbins
(O'Reilly,1997;http://www.ora.com),《UNIX Text Processing》,作者
Dale Dougherty和Tim O'Reilly(Hayden Books,1987)或者是Mike Arst寫的教
程——壓縮包的名稱是“U-SEDIT2.ZIP”(在許多站點上都找得到)。要發(fā)掘sed
的潛力,則必須對“正則表達式”有足夠的理解。正則表達式的資料可以看
《Mastering Regular Expressions》作者Jeffrey Friedl(O'reilly 1997)。
Unix系統(tǒng)所提供的手冊頁(“man”)也會有所幫助(試一下這些命令
“man sed”、“man regexp”,或者看“man ed”中關(guān)于正則表達式的部分),但
手冊提供的信息比較“抽象”——這也是它一直為人所詬病的。不過,它本來就不
是用來教初學(xué)者如何使用sed或正則表達式的教材,而只是為那些熟悉這些工具的人
提供的一些文本參考。
括號語法:前面的例子對sed命令基本上都使用單引號('...')而非雙引號
("...")這是因為sed通常是在Unix平臺上使用。單引號下,Unix的shell(命令
解釋器)不會對美元符($)和后引號(`...`)進行解釋和執(zhí)行。而在雙引號下
美元符會被展開為變量或參數(shù)的值,后引號中的命令被執(zhí)行并以輸出的結(jié)果代替
后引號中的內(nèi)容。而在“csh”及其衍生的shell中使用感嘆號(!)時需要在其前
面加上轉(zhuǎn)義用的反斜杠(就像這樣:\!)以保證上面所使用的例子能正常運行
(包括使用單引號的情況下)。DOS版本的Sed則一律使用雙引號("...")而不是
引號來圈起命令。
'\t'的用法:為了使本文保持行文簡潔,我們在腳本中使用'\t'來表示一個制表
符。但是現(xiàn)在大部分版本的sed還不能識別'\t'的簡寫方式,因此當(dāng)在命令行中為
腳本輸入制表符時,你應(yīng)該直接按TAB鍵來輸入制表符而不是輸入'\t'。下列的工
具軟件都支持'\t'做為一個正則表達式的字元來表示制表符:awk、perl、HHsed、
sedmod以及GNU sed v3.02.80。
不同版本的SED:不同的版本間的sed會有些不同之處,可以想象它們之間在語法上
會有差異。具體而言,它們中大部分不支持在編輯命令中間使用標簽(:name)或分
支命令(b,t),除非是放在那些的末尾。這篇文檔中我們盡量選用了可移植性較高
的語法,以使大多數(shù)版本的sed的用戶都能使用這些腳本。不過GNU版本的sed允許使
用更簡潔的語法。想像一下當(dāng)讀者看到一個很長的命令時的心情:
sed -e '/AAA/b' -e '/BBB/b' -e '/CCC/b' -e d
好消息是GNU sed能讓命令更緊湊:
sed '/AAA/b;/BBB/b;/CCC/b;d' # 甚至可以寫成
sed '/AAA\|BBB\|CCC/b;d'
此外,請注意雖然許多版本的sed接受象“/one/ s/RE1/RE2/”這種在's'前帶有空
格的命令,但這些版本中有些卻不接受這樣的命令:“/one/! s/RE1/RE2/”。這時
只需要把中間的空格去掉就行了。
速度優(yōu)化:當(dāng)由于某種原因(比如輸入文件較大、處理器或硬盤較慢等)需要提高
命令執(zhí)行速度時,可以考慮在替換命令(“s/.../.../”)前面加上地址表達式來
提高速度。舉例來說:
sed 's/foo/bar/g' filename # 標準替換命令
sed '/foo/ s/foo/bar/g' filename # 速度更快
sed '/foo/ s//bar/g' filename # 簡寫形式
當(dāng)只需要顯示文件的前面的部分或需要刪除后面的內(nèi)容時,可以在腳本中使用“q”
命令(退出命令)。在處理大的文件時,這會節(jié)省大量時間。因此:
sed -n '45,50p' filename # 顯示第45到50行
sed -n '51q;45,50p' filename # 一樣,但快得多
如果你有其他的單行腳本想與大家分享或者你發(fā)現(xiàn)了本文檔中錯誤的地方,請發(fā)電
子郵件給本文檔的作者(Eric Pement)。郵件中請記得提供你所使用的sed版本、
該sed所運行的操作系統(tǒng)及對問題的適當(dāng)描述。本文所指的單行腳本指命令行的長
度在65個字符或65個以下的sed腳本〔譯注1〕。本文檔的各種腳本是由以下所列作
者所寫或提供:
Al Aab # 建立了“seders”郵件列表
Edgar Allen # 許多方面
Yiorgos Adamopoulos # 許多方面
Dale Dougherty # 《sed & awk》作者
Carlos Duarte # 《do it with sed》作者
Eric Pement # 本文檔的作者
Ken Pizzini # GNU sed v3.02 的作者
S.G. Ravenhall # 去html標簽?zāi)_本
Greg Ubben # 有諸多貢獻并提供了許多幫助
-------------------------------------------------------------------------
譯注1:大部分情況下,sed腳本無論多長都能寫成單行的形式(通過`-e'選項和`;'
號)——只要命令解釋器支持,所以這里說的單行腳本除了能寫成一行還對長度有
所限制。因為這些單行腳本的意義不在于它們是以單行的形式出現(xiàn)。而是讓用戶能
方便地在命令行中使用這些緊湊的腳本才是其意義所在.
過昨天的學(xué)習(xí)算是對HTML有了一點點了解,知道了什么是前端,什么是HTML、前端三大標準、主流瀏覽器和html的基本結(jié)構(gòu)及常用標簽。那么今天繼續(xù)看看html還有什么新的知識吧。
有常見性就有特殊性,我們使用電腦時經(jīng)常會用到空格鍵,在html文檔上有時也會使用到空格鍵等等,那怎么在html上又是以什么形式展示給瀏覽器解析呢?
瀏覽器顯示結(jié)果 | 特殊字符名稱 | HTML編輯字符 |
空格 | & n b s p; | |
< | 小于號 | & l t ; |
> | 大于號 | & g t; |
& | 和 | & a m p; |
? | 版權(quán) | & c o p y ; |
作用:在瀏覽器上清晰美觀地顯示、展示數(shù)據(jù)。
表格標簽的語法
<table>
<tr>
<td></td>
</tr>
</table>
表格標簽:<table></table>,一個table標簽中可嵌套多個tr標簽。
行標簽:<tr></tr>,一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。
單元格標簽:<td></td>,一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內(nèi)容。
在html中表格不是由橫線劃分行和列,而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子,里面包含tr標簽,這個是一個和table長度差不多的矩形盒子,table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子,td盒子就是單元格。
表格示例:
在html文檔中編輯表格標簽結(jié)構(gòu)時,除了一個標簽一個標簽地敲之外,可以使用快捷方式快速操作:如五行三列的表格,可以在table標簽中輸入:“tr*5>td*3”然后敲回車,就將其表格結(jié)構(gòu)迅速展現(xiàn)出來。
<h1>表格示例:</h1>
<table>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面示例:默認狀態(tài)下表格是沒有線條分界,表格對齊方式左對齊。
表頭單元格標簽
<th></th>:位于表格的第一行或第一列,可以使其內(nèi)容加粗居中顯示。
語法:
<table>
<th>
<td></td>
</th>
</table>
表頭表格代碼示例:
<h1>表頭表格示例:</h1>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面示例:
表格結(jié)構(gòu)標簽
表格結(jié)構(gòu)標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關(guān)系。
表格頭部標簽:<thead></thead>。定義表格頭部,嵌套在<table></table>中,一般位于第一行。
表格主體標簽:<tbody></tbody>。定義表格主體,嵌套在<table></table>中,主要用于顯示數(shù)據(jù)。
代碼示例:
<h1>表格結(jié)構(gòu)標簽</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三豐</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>
運行界面:
表格屬性
雖然表格屬性在實際開發(fā)過程中不常使用,一般都是通過CSS樣式設(shè)置,但是還是需要記住這些屬性關(guān)鍵詞,在css中屬性關(guān)鍵詞也會用到。
注:這些屬性都要寫在table標簽的開始標簽中,多個屬性之間需要使用空格分隔。
align:表格的對其方式。
align=“l(fā)eft”:在瀏覽器中居左顯示。也是默認顯示。
align=“center”:在瀏覽器中居中顯示。
align=“right”:在瀏覽器中居右顯示。
border:表格是否具有邊框。
border=”1”:表格添加邊框。
cellpadding:單元格內(nèi)的元素和td邊框的距離。
舉個例子,如果表格是一件教室的話,桌子就是單元格,桌子上放的書本就是單元格內(nèi)的元素,書本邊緣和桌子邊緣之間產(chǎn)生的空白區(qū)域就是cellpadding的值。
cellspacing:單元格和單元格之間的距離。默認是有空隙的,可設(shè)置為零,使其空隙清零,成為一條直線。
還是以教室為表格,桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。
width:表格的寬度,屬性值可以是像素值也可以是百分比。
height:表格的高度,屬性值可以是像素值也可以是百分比。
代碼示例:
<h1>表頭表格示例:</h1>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面:
合并單元格
合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設(shè)置后,要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。
目標單元格:(合并代碼存在位置)
跨行合并:最上側(cè)單元格為目標單元格,寫合并代碼。
跨列合并:最左側(cè)單元格為目標單元格,寫合并代碼。
合并單元格的方式:
跨行合并:將處于不同行的單元格進行合并
語法:rowspan=“合并單元格個數(shù)”
代碼示例:
<h1>跨行合并表格:</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
運行界面:
跨列合并:將處于不同列的單元格進行合并
語法:colspan=“合并單元格個數(shù)”
代碼示例:
<h1>跨列合并表格:</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
運行示例:
今天學(xué)習(xí)的表格內(nèi)容就到這里了,明天開始學(xué)習(xí)列表。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。