<!doctype html>
<html>
<head>
<title>~~~~</title>
<style>
body{font-family:Tahoma, Geneva;
background-image:url(“~~.gif”);
background-attachment:fixed;
<!--背景图像保持固定状态-->
background-repeat:no-repeat;
<!--背景图像不重复显示-->
height:100%; <!--迫使浏览器将HTML页面视为一个块级元素,可自动填满所有可用空间-->
}
table{
height:200px;
width:200px;
float:right;
}
th{
background-color:black;
color:white;
width:33%;
padding:4px ; <!--**单元格只能使用padding属性**-->
}
td{
padding:4px; <!--单元格中内容若强制单行显示,使用white-space属性,并将值设置为nowrap-->
}
caption {
text-align:center; caption-side:top; <!--caption-side 用于指定将表格标题放在表格的那一边。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设置为1是打开所有内边框和外边框。为0则相反。
border-collapse:collapse关闭单元格边框之间的所有间距。
border-collapse:separate保持单元格边框之间间距。
border-spacing的属性值:如果定义两个,第一个是定义水平间距,第二个垂直间距。
如果定义一个,单元格的水平垂直间距都为此-->
<table rules=”rows” frame=”box”>
< caption>~~~~~</ caption>
<colgroup id=”sessions”> <!--使用colgroup元素和 col元素对列进行分组
-->
<col id=”first”>
<col id=”second”>
</colgroup>
<colgroup id=”~~~”>
<col id=”~~”>
<col id=”~~”>
<col id=”~~~”>
</colgroup>
<tr class=”uppercase”> <!--tr表示表格中的行。
当命名CSS类时,请坚持使用能表明该CSS类用途的名称,而不是使用该类的样式特征作为名称-->
<th colspan=”2”>~~~~~~~~</th>
<th colspan=”3”>~~~~~~~</th> <!--默认每个单元格只跨一个,使用colspan特性可以改变默认设置跨越多列,使用rowspan可以跨越多行-->
</tr>
<tr>
<th>~</th> <!--th表示表格头,默认内容将居中粗体显示-->
<th><strong>~~</strong></th> <!--strong元素使文本以粗体显示-->
<th><img src=”~~”></th>
<th>~</th>
<td>~</td> <!--td表示表格中数据,在单元格的<td>和</td>标记之间中输入非换行空格( )表示表中包含无内容的空单元格,
如果表中包含大量空单元格,可以在<table>标记的样式声明中添加“empty-cell:show;”-->
</tr>
………..
</table>
<p>~~~~~~~~~</p>
</body>
</html>
- 在表格中包含一个thead或者一个tfoot那么表格中必须包含一个tbody元素。