標籤：style blog http color 使用 width
女朋友不是學電腦的，但是現在從事電腦行業，做支援人員，她想學習編程，因此我打算每天教她一點點，日積月累，帶她學習編程，如果其他初學者感興趣，可以跟著學。
為了將table介紹的簡單、生動，具有實戰性，我花了3個半小時，寫了5個列子，把table的一些重點知識講了一下，直接看代碼吧，一邊看一邊跟著敲，多動手練習。
1，邊框不重疊的3行3列表格
<html><head><title>html中table的用法和例子</title></head><body>1，邊框不重疊的3行3列表格<table border="1" ><tr><td>學號</td> <td>姓名</td> <td>性別</td></tr><tr><td>001</td> <td>小強</td> <td>男</td></tr><tr><td>002</td> <td>小芳</td> <td>女 </td></tr></table></body></html>
(1)table標籤代表“表格”，border是它的屬性，“邊框”的意思，這裡設定邊框1像素(1px)。
(2)tr標籤代表“行”，每個表格table都是由多行(tr)組成的
(3)td標籤代表“儲存格”，每行(tr)都包括多個儲存格(td)。
(4)表格的每個儲存格都有邊框，預設是不顯示邊框的；當給table設定了border="1"之後，就會顯示邊框，但是邊框不重疊。
(5)邊框不重疊是不是很醜？你知道怎麼讓邊框重疊嗎？往下看。
2，合并邊框的3行3列表格
<html><head><title>html中table的用法和例子</title></head><body>2，合并邊框的3行3列表格<table border="1" style=" border-collapse:collapse;" ><tr><td>學號</td> <td>姓名</td> <td>性別</td></tr><tr><td>001</td> <td>小強</td> <td>男</td></tr><tr><td>002</td> <td>小芳</td> <td>女 </td></tr></table></body></html>
(1)合并表格的邊框，需要給table添加樣式；樣式就是樣子、外貌、長相，可以通過style=""來給
任何html標籤添加樣式，雙引號內部採用“屬性名稱:屬性值;”的形式，注意“屬性名稱”和“屬性值”
中間是冒號，不是等號，屬性值後面是分號。
(2)屬性名稱border-collapse的意思是“邊框摺疊方式”，border是邊框的意思，collapse是“摺疊”的意思，border-collapse對應的值有3個：separate(邊框分開)，collapse(邊框摺疊)，inherit(從父元素繼承border-collapse的值)。
border-collapse預設值為separate，因此，如果需要邊框摺疊，就需要設定border-collapse:collapse。
(3)表格沒有標題，內容很擠，不美觀，往下看吧。
3，帶有標題、設定了寬度的表格
<html><head><title>html中table的用法和例子</title></head><body><table border="1" style=" border-collapse:collapse;width:80%;" ><caption align="top">學生資訊表</caption><tr><td style="width:30%;">學號</td> <td style="width:60%;">姓名</td> <td style="width:10%;">性別</td></tr><tr><td >001</td> <td >小強</td> <td>男</td></tr><tr><td>002</td> <td>小芳</td> <td>女 </td></tr></table></body></html>
(1)caption標籤是表格的標題標籤，caption 標籤必須緊隨 table 標籤之後。且每個表格只能定義一個標題。預設標題會顯示在表格上方中間，可以使用align屬性來
設定標題位置，值有top(頂部)，bottom(底部)，left(左邊)，right(右邊)。
(2)width:80%;設定了table的寬度為80%，指的是table占父元素(此處是body標籤)的百分比。另外，
分別給“學號”、“姓名”、“性別”這3列的寬度設定為30%、60%、10%，指的是td佔tr的百分比，而tr
代表一行，又預設寬度為table的寬度。
(3)對於表格，只需要設定第一行各個儲存格的寬度就行了，其他行的儲存格會繼承相同列儲存格的寬度，我實驗了一下，如果第二行第一列設定為70%，那麼所有的第一列都佔了70%的寬度，因此，
建議只設定第一行儲存格的寬度，而不是所有儲存格都設定寬度，不要把自己都搞暈了。
(4)你知道怎麼讓一個儲存格跨多列嗎？且讓內容置中？表格固定像素寬度？請往下看。
4，用跨列td填充標題，表格固定寬度，儲存格置中顯示
<html><head><title>html中table的用法和例子</title></head><body>4，用跨列td填充標題，表格固定寬度，儲存格置中顯示<table border="1" style=" border-collapse:collapse; width:300px; " ><tr><td colspan="3" align="center" >學生資訊表</td></tr><tr><td style="width:50px;">姓名</td> <td style="width:200px;">經典</td> <td style="width:50px;">性別</td></tr><tr><td >小強</td><td >小強你怎麼樣了小強，小強你不要死啊。我們同甘共苦了那麼多年，一直對你供書教學，想不到現在白頭人送黑頭人。你死了我怎麼辦啊小強。你醒醒啊，小強！</td> <td>男</td></tr><tr><td>鳳姐</td> <td>以我的智商和以我的能力的話，往前推三百年，往後推三百年，總共六百年之內不會有第二個人超過我。</td> <td>女 </td></tr></table></body></html>
(1)固定寬度直接使用像素表示，比如table的寬度設定為300像素，width:300px;
(2)colspan="3"說明了一個儲存格跨3列，col是列的意思，span是平鋪的意思，組合就是"平鋪3列"；如果跨3行，用rowspan="3"，row是行的意思，組合就是“平鋪3行”，也就是“跨3行”。
(3)儲存格有個屬性align，代表內容靠哪邊的意思，它的值有left(靠左),right(靠右),center(置中)，align="center"就是讓內容“置中”的意思，因此標題就置中了。預設的是靠左，因此，其他儲存格的內容都靠左。
(4)堅持一下，最後給你講講表格的“固定表格版面配置”和“自動表格版面配置”。
5,“固定表格版面配置”和“自動表格版面配置”
<html><head><title>html中table的用法和例子</title></head><body>5,“固定表格版面配置”和“自動表格版面配置”<table border="1" style=" border-collapse:collapse; table-layout:fixed; width:300px;" ><tr><td colspan="3" align="center" >學生資訊表</td></tr><tr><td style="width:50px;">姓名</td> <td style="width:200px;">經典</td> <td style="width:50px;">性別</td></tr><tr><td >小強</td><td >小強你怎麼樣了小強，小強你不要死啊。我們同甘共苦了那麼多年，一直對你供書教學，想不到現在白頭人送黑頭人。你死了我怎麼辦啊小強。你醒醒啊，小強！</td> <td>男</td></tr><tr><td>鳳姐</td> <td>以我的智商和以我的能力的話，往前推三百年，往後推三百年，總共六百年之內不會有第二個人超過我。</td> <td>女 </td></tr></table></body></html>
(1)table多了一個樣式table-layout:fixed;意思是設定表格版面配置演算法為“固定表格版面配置”。當設定了fixed時，列寬由表格寬度和列寬度設定，“固定”的意思就是寬度固定不變，有時設定了表格儲存格的寬度，但是不起作用(可以在IE6、IE7、IE8上測試一下)，就需要增加樣式table-layout:fixed;
我在IE10和獵豹瀏覽器上測試了1個小時，結果是加上了table-layout:fixed;導致寬度不起作用了，但是，我在公司使用IE8測試程式時，不加table-layout:fixed會導致寬度不起作用，因此，不同瀏覽器對table-layout的解析是不同的。
(2)table-layout還有另外一個值，automatic，對應“自動表格版面配置”，也是預設值，列的寬度是由列儲存格中沒有折行的最寬的內容設定的，也就是儲存格寬度和最長一行的內容一致，儲存格寬度不是固定的，需要動態計算。
(3)一般情況下，是需要用“固定表格版面配置”的，設定好表格和儲存格的寬度，防止表格因為內容的不同而變形。
在瀏覽器中查看，我截了2張，如下：
2：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
