Table align
Muốn canh vị trí tất cả tiêu đề hay nội dung của table, chúng ta sẽ sử dụng các thuộc tính của CSS kèm theo sẽ phát huy hiệu quả cả về mặc SEO và hiệu quả code.
Table – text-align
text-align: giúp canh phần tử table bên trái, bên phải hay ở giữa.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
height: 60px;
padding: 10px;
}
.alignL { text-align: left; }
.alignC { text-align: center; }
.alignR { text-align: right; }
</style>
</head>
<body>
<table class="tableStyle" border="1">
<tr>
<td class="alignL">text-align: left</td>
<td class="alignC">text-align: center</td>
<td class="alignR">text-align: right</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Một số ứng dụng của text-align: cho các phần tử table.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle th,
.tableStyle td {
padding: 5px;
text-align: left;
vertical-align: top;
}
.tableStyle th{
text-align: right;
width: 20%;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
<tr>
<th>Họ và tên</th>
<td>Nguyễn Văn A</td>
</tr>
<tr>
<th>Điện thoại</th>
<td>0123 456 789</td>
</tr>
<tr>
<th>Kỹ năng</th>
<td>HTML<br>
XHTML<br>
CSS<br>
CSS3<br>
jQuert</td>
</tr>
<tr>
<th>Sở thích</th>
<td>Ăn<br>
Ngủ</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Table – vertical-align:
vertical-align:: giúp canh phần tử table bên trên, ở giữa, bên dưới.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
height: 60px;
padding: 10px;
}
.vAlignT { vertical-align: top; }
.vAlignC { vertical-align: middle; }
.vAlignB { vertical-align: bottom; }
</style>
</head>
<body>
<table class="tableStyle" border="1">
<tr>
<td class="vAlignT">vertical-align: top</td>
<td class="vAlignC">vertical-align: middle</td>
<td class="vAlignB">vertical-align: bottom</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Một số ứng dụng của vertical-align: cho các phần tử table.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle th,
.tableStyle td {
padding: 5px;
text-align: left;
vertical-align: top;
}
.tableStyle th{
vertical-align: middle;
width: 20%;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
<tr>
<th>Họ và tên</th>
<td>Nguyễn Văn A</td>
</tr>
<tr>
<th>Điện thoại</th>
<td>0123 456 789</td>
</tr>
<tr>
<th>Kỹ năng</th>
<td>HTML<br>
XHTML<br>
CSS<br>
CSS3<br>
jQuert</td>
</tr>
<tr>
<th>Sở thích</th>
<td>Ăn<br>
Ngủ</td>
</tr>
</table>
</body>
</html>