 | Một mẫu HTML table màu xanh lơ, mẫu này tính ra cũng khá đẹp, lại đơn giản dễ sử dụng, ngoài ra còn có thêm sự kiện chuột(mouse) tô màu row khi được con trỏ chỉ vào. |
Image Design:
Demo:
| Firstname | Lastname | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
HTML Source:
<!DOCTYPE html>
<html>
<head>
<style>
/* Table Styles */
table {
}
table.table_style_01
{
border-spacing: 0;
border-collapse: collapse;
border: 2px solid #A1C3DF;
background-color: #DAECF0;
}
table.table_style_01 td, table.table_style_01 th
{
border: 1px solid #A1C3DF;
padding: 0.5ex 0.5ex;
}
table.table_style_01 td {
background-color: #FFF;
}
table.table_style_01 tr:hover td {
background-color: #EEF8FF;
}
</style>
</head>
<body>
<table style="width:100%" class="table_style_01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<style>
/* Table Styles */
table {
}
table.table_style_01
{
border-spacing: 0;
border-collapse: collapse;
border: 2px solid #A1C3DF;
background-color: #DAECF0;
}
table.table_style_01 td, table.table_style_01 th
{
border: 1px solid #A1C3DF;
padding: 0.5ex 0.5ex;
}
table.table_style_01 td {
background-color: #FFF;
}
table.table_style_01 tr:hover td {
background-color: #EEF8FF;
}
</style>
</head>
<body>
<table style="width:100%" class="table_style_01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Designer: +Bui Ngoc Son
No comments:
Post a Comment