Thứ Năm, 26 tháng 12, 2013

CSS Tables




Giao diện của một bảng HTML có thể được cải thiện rất nhiều với CSS:

Công tyLiên hệNước
Alfred FutterkisteMaria AndersĐức
Siêu thị Berglund củaChristina BerglundThụy Điển
Moctezuma MallFrancisco ChangMexico
Thương mại ErnstRoland MendelÁo
Đảo giao dịchHelen BennettVương quốc Anh
Hoàng gia thực phẩmPhilip CramerĐức
Cười Bacchus WinecellarsYoshi TannamuriCanada
Cửa hàng tạp hóa Tập hợpJohn RovelliÝ
Bắc / NamSimon CrowtherVương quốc Anh
Đặc ParisMarie BertrandPháp
Big CheeseLiz NixonHoa Kỳ
Máy wafflePalle IbsenĐan Mạch

Biên giới bảng

Để xác định đường viền bảng trong CSS, sử dụng tài sản biên giới.

Ví dụ dưới đây chỉ ra một đường viền đen cho bảng, thứ, và các yếu tố td:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>


Thử nó cho mình »

Chú ý rằng bảng trong ví dụ trên có đường viền đôi. Điều này là do cả hai bảng và các yếu tố thứ / td có biên giới riêng biệt.

Để hiển thị một biên giới duy nhất cho bảng, sử dụng tài sản cửa sụp đổ.

Thu biên giới

Tài sản cửa sụp đổ cho dù bộ biên giới bảng được đổ vào một biên giới duy nhất hoặc tách:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results 
in IE8 and earlier versions.</p>
</body>
</html>

Thử nó cho mình »

Bảng Width và Height

Chiều rộng và chiều cao của một bảng được xác định bởi chiều rộng và chiều cao các thuộc tính.

Ví dụ dưới đây bộ chiều rộng của bảng tới 100%, và chiều cao của các yếu tố thứ để 50px:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Thử nó cho mình »

Tiêu đề bảng sắp

Các văn bản trong một bảng được liên kết với các text-align và dọc-align tài sản.

Tài sản text-align đặt liên kết ngang, như trái, phải, hoặc trung tâm:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>


Thử nó cho mình »

Tài sản theo chiều dọc-align đặt kết theo chiều dọc, như trên, dưới, hoặc giữa:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Thử nó cho mình »

Bảng Padding

Để kiểm soát không gian giữa các biên giới và nội dung trong một bảng, sử dụng tài sản padding trên td và các yếu tố thứ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Thử nó cho mình »

Bảng màu

Ví dụ dưới đây chỉ ra các màu sắc của biên giới, và các văn bản và màu nền của yếu tố thứ:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Thử nó cho mình »
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)