使用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>

CSS：表格样式（设置表格边框/文字/背景的样式）的更多相关文章

  1. css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）

    css3-5  css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...

  2. 各种CSS样式设置细线边框

    基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...

  3. td 内容自动换行 table表格td设置宽度后文字太多自动换行

    设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可   ...

  4. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  5. 通过CSS给图像设置圆角边框

    <html> <style> .smaller-image{ border-radius: 50%; width: 100px; } </style> <bo ...

  6. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  7. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  8. 第七十四节，css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  9. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

随机推荐

  1. Java数组你知多少？

    下面我带大家一起加深一下对Java数组的认识: 1.理解数组 数组也是一种数据类型,本身就是一种引用类型,我们从它的初始化方法,通过关键字new去完成定义及初始化就可以知道. 数组的长度是不变的,一旦 ...

  2. Java 简单登录MVC

    构建一个简单的基于MVC模式的JavaWeb 零晨三点半了,刚刚几个兄弟一起出去吼歌,才回来,这应该是我大学第二次去K歌,第一次是大一吧,之后每次兄弟喊我,我都不想去,因为我还是很害怕去KTV,或许是 ...

  3. 跟我学LFS LiveUSB制作

    LFS LiveCD启动 插入U盘,查看U盘相应的设备名 $ sudo /sbin/fdisk -l ... Device Boot      Start         End      Block ...

  4. I.MX6 PMU MMPF0100 driver porting

    /************************************************************************** * I.MX6 MMPF0100 driver ...

  5. 根据权限显示隐藏SharePoint 2010快速启动栏的链接

    转:http://www.360sps.com/Item/ShowAndHiddenLink.aspx 在SharePoint 2010的快速启动栏中可以根据权限来显示或隐藏列表.库.网站的链接,如果 ...

  6. Struts2 教程

    一.Struts2是什么 Struts2是在WebWork2基础发展而来的.和Struts1一样, Struts2也是基于MVC的web层框架. 那么既然有了Struts1,为何还要Struts2? ...

  7. C#中如何截取Windows消息来触发自定义事件

    原文 C#中如何截取Windows消息来触发自定义事件 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题. 由于目前使用c#的开发人员非常多,而且大多数c#程 ...

  8. 《深入Java虚拟机学习笔记》- 第9章 垃圾收集

    一.Java内存组成 组成图 堆(Heap) 运行时数据区域,所有类实例和数组的内存均从此处分配.Java虚拟机启动时创建.对象的堆内存由称为垃圾回收器的自动内存管理系统回收. 组成 组成 详解 Yo ...

  9. Parallel stepped for loops in .NET C# z

    ; i < ; i += ) public IEnumerable<int> SteppedIntegerList(int startIndex, int endEndex, int ...

  10. 富文本HTML编辑器UEditor

    Baidu百度开源富文本HTML编辑器UEditor JS代码网 发表于: 2013-10-30 分类:HTML编辑器  点击:2133  UEditor是由百度web前端研发部开发所见即所得富文本H ...