HTML表格画线效果
2016-07-12 15:34:57 访问(1686) 赞(0) 踩(0)
-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.DL {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
width:100%;
}
th.DL, td.DL, td.DLA {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
cursor:pointer;
}
th.DL {
font-weight: bold;
background: #ccc;
}
td.DLA {
background:#ffffff;
}
</style>
</head>
<body>
<table class="DL">
<tr class="DL">
<th class="DL">table head (row1, col1)</th>
<th class="DL">table head (row1, col2)</th>
<th class="DL">table head (row1, col3)</th>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
</table>
</body>
</html>
-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.DL {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
width:100%;
}
th.DL, td.DL, td.DLA {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
cursor:pointer;
}
th.DL {
font-weight: bold;
background: #ccc;
}
td.DLA {
background:#ffffff;
}
</style>
</head>
<body>
<table class="DL">
<tr class="DL">
<th class="DL">table head (row1, col1)</th>
<th class="DL">table head (row1, col2)</th>
<th class="DL">table head (row1, col3)</th>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
<tr class="DL">
<td class="DLA">table data (row2, col1)</td>
<td class="DLA">table data (row2, col2)</td>
<td class="DLA">table data (row2, col3)</td>
</tr>
<tr class="DL">
<td class="DL">table data (row1, col1)</td>
<td class="DL">table data (row1, col2)</td>
<td class="DL">table data (row1, col3)</td>
</tr>
</table>
</body>
</html>
标签：
HTML表格画线效果 
上一条：
下一条：
相关评论
发表评论