html 制作表格 合并 样式

时间:2022-06-16 09:26:15

html 制作表格 合并 样式html 制作表格 合并 样式代码
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > CSS Tables </ title >
< link  href ="styles.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< style  type ="text/css" >
/*  CSS Document  */
body 
{
font
:  normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color
:  #4f6b72 ;
background
:  #E6EAE9 ;
}
{
color
:  #c75f3e ;
}
#mytable 
{
padding
:  0 ;
margin
:  0 ;
}
caption 
{
padding
:  0 0 5px 0 ;
width
:  700px ;
font
:  italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
text-align
:  right ;
}
th 
{
font
:  bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color
:  #4f6b72 ;
border-right
:  1px solid #C1DAD7 ;
border-bottom
:  1px solid #C1DAD7 ;
border-top
:  1px solid #C1DAD7 ;
letter-spacing
:  2px ;
text-transform
:  uppercase ;
text-align
:  left ;
padding
:  6px 6px 6px 12px ;
background
:  #CAE8EA url(images/bg_header.jpg) no-repeat ;
}
th.nobg 
{
border-top
:  0 ;
border-left
:  0 ;
border-right
:  1px solid #C1DAD7 ;
background
:  none ;
}
td 
{
border-right
:  1px solid #C1DAD7 ;
border-bottom
:  1px solid #C1DAD7 ;
background
:  #fff ;
font-size
: 11px ;
padding
:  6px 6px 6px 12px ;
color
:  #4f6b72 ;
}

td.alt 
{
background
:  #F5FAFA ;
color
:  #797268 ;
}
th.spec 
{
border-left
:  1px solid #C1DAD7 ;
border-top
:  0 ;
background
:  #fff url(images/bullet1.gif) no-repeat ;
font
:  bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
}
th.specalt 
{
border-left
:  1px solid #C1DAD7 ;
border-top
:  0 ;
background
:  #f5fafa url(images/bullet2.gif) no-repeat ;
font
:  bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color
:  #797268 ;
}
/* ---------for IE 5.x bug */
html>body td
{  font-size : 11px ; }
</ style >
< body >
< table  id ="mytable"  cellspacing ="0"  summary ="The technical specifications of the Apple PowerMac G5 series" >
< caption >   </ caption >
< tr >
< th  scope ="col"  abbr ="Configurations"  class ="nobg" > Configurations </ th >
< th  scope ="col"  abbr ="Dual 1.8" > Dual 1.8GHz </ th >
< th  scope ="col"  abbr ="Dual 2" > Dual 2GHz </ th >
< th  scope ="col"  abbr ="Dual 2.5" > Dual 2.5GHz </ th >
</ tr >
< tr >
< th  scope ="row"  abbr ="Model"  class ="spec" > lipeng </ th >
< td  colspan =3 > M9454LL/A </ td >
</ tr >
< tr >
< th  scope ="row"  abbr ="G5 Processor"  class ="specalt" > mapabc </ th >
< td  class ="alt" > Dual 1.8GHz PowerPC G5 </ td >
< td  class ="alt" > Dual 2GHz PowerPC G5 </ td >
< td  class ="alt" > Dual 2.5GHz PowerPC G5 </ td >
</ tr >
< tr >
< th  scope ="row"  abbr ="Frontside bus"  class ="spec" > 地图名片 </ th >
< td > 900MHz per processor </ td >
< td > 1GHz per processor </ td >
< td > 1.25GHz per processor </ td >
</ tr >
< tr >
< th  scope ="row"  abbr ="L2 Cache"  class ="specalt" > 图秀卡 </ th >
< td  class ="alt" > 512K per processor </ td >
< td  class ="alt" > 512K per processor </ td >
< td  class ="alt" > 512K per processor </ td >
</ tr >
</ table >
</ body >
</ html >

 

 

效果图

 

 html 制作表格 合并 样式