Border cho table

Mặc định của table là các khoảng cách giữa các hàng và cột.
Chúng ta có thể sử dụng border trong css để điều chỉnh cho đẹp và dễ nhìn hơn.

Table – với border none

Đây là cách tận dụng các khoảng cách của các phần tử table để tạo border, khi này phần nền bên dưới sẽ là border cho 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 {
    border: none;
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle">
    <tr>
        <th>th01</th>
        <th>th02</th>
        <th>th03</th>
        <th>th04</th>
        <th>th05</th>
    </tr>
    <tr>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td>td32</td>
        <td>td33</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <td>td41</td>
        <td>td42</td>
        <td>td43</td>
        <td>td44</td>
        <td>td45</td>
    </tr>  
</table>
</body>
</html>

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

 

Download file để thực hành

Table – với border 1px

Tạo một border duy nhất bao quanh table, phần khoảng cách còn lại được xem như là phần viền ngăn cách các phần tử.

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 {
    border: 1px solid #ccc;
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle">
    <tr>
        <th>th01</th>
        <th>th02</th>
        <th>th03</th>
        <th>th04</th>
        <th>th05</th>
    </tr>
    <tr>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td>td32</td>
        <td>td33</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <td>td41</td>
        <td>td42</td>
        <td>td43</td>
        <td>td44</td>
        <td>td45</td>
    </tr>  
</table>
</body>
</html>

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

 

Border cho các phần tử của table (table cell)

Mỗi phần tử sẽ được bao bằng một border riêng biệt, tạo sự tách biệt giữa các phần tử.

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 {
    border: 1px solid #ccc;
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    border: 1px solid #ccc;
    padding: 5px;
}
.tableStyle th {
    background-color: #cad8fa;
}
.tableStyle td {
    background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
    <tr>
        <th>th01</th>
        <th>th02</th>
        <th>th03</th>
        <th>th04</th>
        <th>th05</th>
    </tr>
    <tr>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td>td32</td>
        <td>td33</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <td>td41</td>
        <td>td42</td>
        <td>td43</td>
        <td>td44</td>
        <td>td45</td>
    </tr>  
</table>
</body>
</html>

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

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *