CSS:表格样式(设置表格边框/文字/背景的样式)

前提是你 提交于 2020-04-03 08:00:03

使用CSS能够制作出十分精美的表格。

代码整理自w3school:http://www.w3school.com.cn

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>CSS 表格样式</title>

<head>
  <style type="text/css">
    body {background-color:#e8e8e8}
    /*text-align 属性设置水平对齐方式,vertical-align 属性设置垂直对齐方式*/
    table,th,td {border:1px solid blue;text-align:center} 
    table.singlineBorder {border-collapse:collapse;}  /*单线条边框的表格*/
    table.widthPercent30 {width:30%}
    th.height50px {height:50px}
    td.greenBg {color:#00aa00;background-color:#ccc}

    /*一个精美的表格*/
    table.niceTable 
    {
     width:30%;
     border-collapse:collapse;
     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    table.niceTable td,table.niceTable th
    {
     padding:3px 7px 2px 7px;
     border:1px solid #98bf21;
    }
    table.niceTable th
    {
     color:white;
     background-color:#A7C942;
    }
    table.niceTable tr.light td {background-color:#EAF2D3;}

  </style>
</head>

<body>
  <h3>(一)蓝色边框的表格</h3>
  <table cellpadding="10px">
    <tr>
      <th>省份</th>
      <th>面积</th>
    </tr>
    <tr>
      <td>黑龙江</td>
      <td>47.2</td>
    </tr>
    <tr>
      <td>辽宁</td>
      <td>11.6</td>
    </tr>
  </table>

  <h3>(二)单线条边框的表格</h3>
  <table cellpadding="10px" class="singlineBorder">
    <tr>
      <th>省份</th>
      <th>面积</th>
    </tr>
    <tr>
      <td>黑龙江</td>
      <td>47.2</td>
    </tr>
    <tr>
      <td>辽宁</td>
      <td>11.6</td>
    </tr>
  </table>

  <h3>(三)表格宽度30%。高度50px,设置字体颜色和背景颜色</h3>
  <table class="widthPercent30">
    <tr>
      <th class="height50px">省份</th>
      <th class="height50px">面积</th>
    </tr>
    <tr>
      <td>黑龙江</td>
      <td class="greenBg">47.2</td>
    </tr>
    <tr>
      <td>辽宁</td>
      <td class="greenBg">11.6</td>
    </tr>
  </table>

  <h3>(四)一个美丽的表格</h3>
  <table cellpadding="10px" class="niceTable">
    <caption>省份基本信息</caption>
    <tr>
      <th>省份</th>
      <th>省会</th>
      <th>面积</th>
      <th>人口</th>
      <th>GDP</th>
    </tr>
    <tr>
      <td>黑龙江</td>
      <td>哈尔滨</td>
      <td>47.2</td>
      <td>4900</td>
      <td>16000</td>
    </tr>
    <tr class="light">
      <td>吉林</td>
      <td>长春</td>
      <td>11.6</td>
      <td>2600</td>
      <td>27000</td>
    </tr>
    <tr>
      <td>辽宁</td>
      <td>沈阳</td>
      <td>12.6</td>
      <td>4500</td>
      <td>27000</td>
    </tr>
    <tr class="light">
      <td>河北</td>
      <td>石家庄</td>
      <td>29.1</td>
      <td>5200</td>
      <td>26000</td>
    </tr>
  </table>

</body>

</html>


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!