Table align

Trở về

  • 1,015

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:

 

Download file để thực hành

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>

Hiển thị trình duyệt:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.