<!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>标记之间中输入非换行空格(&nbsp)表示表中包含无内容的空单元格,
如果表中包含大量空单元格,可以在<table>标记的样式声明中添加“empty-cell:show;”-->

</tr>

………..

</table>

<p>~~~~~~~~~</p>

</body>

</html>

  • 在表格中包含一个thead或者一个tfoot那么表格中必须包含一个tbody元素。
posted on 2016-05-13 16:20  钎探穗  阅读(280)  评论(0编辑  收藏  举报