前端练习5-css制作漂亮表格
来源：互联网 发布：java内存泄露代码 编辑：程序博客网 时间：2024/05/16 18:30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=gb2312" />
<title> 使用CSS制作一个漂亮的表格实例-www.baike369. com</ title>
<style type= "text/css">
/*id为customers 的标签的样式*/
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
/*id为customers 的标签里面的td标签和th标签的样式*/
#customers td, #customers th
{
font-size:1em;
border:1px solid #98BF21;
padding:3px 7px 2px 7px;
}
/*id为customers 的标签里面的th标签的样式*/
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#FFF;
}
/*id为customers的标签里面的class名为alt的tr标签里面的td标签的样式*/
#customers tr.alt td
{
color:#000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id= "customers">
<tr>
<th >Company </th>
<th >Contact </th>
<th >Country </th>
</tr>
<tr>
<td >Apple </td>
<td >Steven Jobs</ td>
<td >USA </td>
</tr>
<tr class= "alt">
<td >Baidu</td>
<td >Li YanHong</ td>
<td >China</td>
</tr>
<tr>
<td >Google </td>
<td >Larry Page</ td>
<td >USA </td>
</tr>
<tr class= "alt">
<td >Lenovo</td>
<td >Liu Chuanzhi</td >
<td >China</td>
</tr>
<tr>
<td >Microsoft </td>
<td >Bill Gates </td>
<td >USA </td>
</tr>
<tr class= "alt">
<td >Nokia</td>
<td >Stephen Elop</td >
<td >Finland</td>
</tr>
</table>
</body>
</html>
运行结果：
0 0
- 前端练习5-css制作漂亮表格
- Div+CSS 制作漂亮表格
- CSS学习笔记 制作一个漂亮的表格
- 一个css漂亮表格
- 制作一个漂亮的表格
- 制作一个漂亮的表格
- css表格练习
- CSS+DIV 制作表格
- CSS 表格制作日历
- 制作漂亮的超细线表格
- perl制作漂亮的xls表格
- 漂亮的CSS立体表格效果
- 20 个漂亮的 Ajax + CSS 表格
- 20个漂亮的Ajax+CSS表格
- CSS设置1px漂亮表格边框?
- CSS实例(一)：漂亮的表格样式
- css设计一个漂亮的表格
- 纯css打造漂亮的html表格
- 329_BitmapFactory使用
- Numpy 中tile(A, reps)方法 Python-Numpy函数-tile函数
- 【BLE】CC2541安卓手机搜索不到设备服务的UUID
- SELinux策略语言--客体类别和许可
- Git 入门
- 前端练习5-css制作漂亮表格
- Linux命令之"more"
- 性能优化之避免在循环里面操作IO
- springMVC初步入门（一）
- 迪杰斯特拉dijkstar（算法个人观点）
- m个苹果放入n个盘子
- 删除算法
- LightOJ1026-Critical Links-tarjan
- android studio 运行程序报：Session 'app': Error Installing APK，解决方案
