当前位置: 移动技术网 > IT编程>网页制作>CSS > 漂亮的表格

漂亮的表格

2017年12月12日  | 移动技术网IT编程  | 我要评论
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en""http://www.w3.org/tr/xhtml

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
}

a {
 color: #c75f3e;
}

#mytable {
 width: 700px;
 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>m9454ll/a</td>

    <td>m9455ll/a</td>
    <td>m9457ll/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>

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网