一个丑陋的报表

一个丑陋的表格

table.css

.table {
	border-left-style: solid;
	border-left-width: 1px;
	border-top-style: solid;
    border-top-width: 1px;
    border-color: #cccccc;
    padding: 0px;
    border-spacing:0px;/* 设置单元格的间距,相当于html中table元素的cellspacing属性  */
    width:50%;
}

.header td {
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
	background-color: #DBE7EF;
	color: #000066;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px 2px 4px;
	height:20px;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #cccccc;
}

.odd td, .even td {
	height: 18px;
	white-space: nowrap;
  	font-weight: bold;
  	font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
    padding: 0px 3px 0px 5px;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #cccccc;
}
.odd {
    background-color: white;
}

.even {
    background-color: #F7F7F7;
}

table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="table.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<table class="table">
		<tr class="header">
			<td>TITLE</td>
			<td>TITLE</td>
			<td>TITLE</td>
			<td>TITLE</td>
		</tr>
		
		<tr class="odd">
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
		</tr>
		
		<tr class="even">
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
		</tr>
		
		<tr class="odd">
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
		</tr>
		
		<tr class="even">
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
			<td>CONTENT</td>
		</tr>
	</table>
</body>
</html>

一个丑陋的报表

相关推荐