Table với border các kiểu khác nhau

Đây là nhiều dạng table mà chúng ta thường gặp, nếu không biết cách điều chỉnh border hợp lý thì những dạng này thật sự là một rắc rối, tuy nhiên chỉ vài dòng CSS sử lý spacing và border phù hợp, chúng ta có thể tạo được table hợp lý.

Table – border với border-collapse

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

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;
    border-collapse: collapse;
    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:

 

Download file để thực hành

Table – border top và bottom

Border top và bottom cho các phần tử của table (table cell)

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;
    border-collapse: collapse;
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 5px;
    text-align: center;
}
.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:

 

Border top và bottom cho các phần tử của table (table cell) với màu trắng.

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-collapse: collapse;
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    padding: 5px;
    text-align: center;
}
.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:

 

Table – border left và right

Border left và right cho các phần tử của table (table cell)

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;
	border-collapse: collapse;
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 5px;
    text-align: center;
}
.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:

 

Border left và right cho các phần tử của table (table cell) với màu trắng.

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-collapse: collapse;
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 5px;
    text-align: center;
}
.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 *