<!doctype html>
<html>
<head>
<title>~~~~</title>
<style>
body{font-family:Tahoma, Geneva;
background-image:url(“~~.gif”);
background-attachment:fixed;
<!--背景圖像保持固定狀態(tài)-->
background-repeat:no-repeat;
<!--背景圖像不重復(fù)顯示-->
height:100%; <!--迫使瀏覽器將HTML頁面視為一個塊級元素,可自動填滿所有可用空間-->
}
table{
height:200px;
width:200px;
float:right;
}
th{
background-color:black;
color:white;
width:33%;
padding:4px ; <!--**單元格只能使用padding屬性**-->
}
td{
padding:4px; <!--單元格中內(nèi)容若強制單行顯示,使用white-space屬性,并將值設(shè)置為nowrap-->
}
caption {
text-align:center; caption-side:top; <!--caption-side 用于指定將表格標(biāo)題放在表格的那一邊。text-align :“.”是告訴瀏覽器與點號對齊-->
}
#first{
background-color:#999;
}
#second{
background-color:#ccc;
}
.center{
text-align:center;
}
.uppercase{
text-transform:uppercase;
}
</style>
</head>
<body>
<table border=1> <!--border設(shè)置為1是打開所有內(nèi)邊框和外邊框。為0則相反。
border-collapse:collapse關(guān)閉單元格邊框之間的所有間距。
border-collapse:separate保持單元格邊框之間間距。
border-spacing的屬性值:如果定義兩個,第一個是定義水平間距,第二個垂直間距。
如果定義一個,單元格的水平垂直間距都為此-->
<table rules=”rows” frame=”box”>
< caption>~~~~~</ caption>
<colgroup id=”sessions”> <!--使用colgroup元素和 col元素對列進(jìn)行分組
-->
<col id=”first”>
<col id=”second”>
</colgroup>
<colgroup id=”~~~”>
<col id=”~~”>
<col id=”~~”>
<col id=”~~~”>
</colgroup>
<tr class=”uppercase”> <!--tr表示表格中的行。
當(dāng)命名CSS類時,請堅持使用能表明該CSS類用途的名稱,而不是使用該類的樣式特征作為名稱-->
<th colspan=”2”>~~~~~~~~</th>
<th colspan=”3”>~~~~~~~</th> <!--默認(rèn)每個單元格只跨一個,使用colspan特性可以改變默認(rèn)設(shè)置跨越多列,使用rowspan可以跨越多行-->
</tr>
<tr>
<th>~</th> <!--th表示表格頭,默認(rèn)內(nèi)容將居中粗體顯示-->
<th><strong>~~</strong></th> <!--strong元素使文本以粗體顯示-->
<th><img src=”~~”></th>
<th>~</th>
<td>~</td> <!--td表示表格中數(shù)據(jù),在單元格的<td>和</td>標(biāo)記之間中輸入非換行空格( )表示表中包含無內(nèi)容的空單元格,
如果表中包含大量空單元格,可以在<table>標(biāo)記的樣式聲明中添加“empty-cell:show;”-->
</tr>
………..
</table>
<p>~~~~~~~~~</p>
</body>
</html>
- 在表格中包含一個thead或者一個tfoot那么表格中必須包含一個tbody元素。
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。