Background cho table

Trở về

  • 8,059

Để cho table dễ nhìn hơn, dễ phân biệt đâu là tiêu đề, đâu là nội dung, đâu là khu vực được đánh dấu, … chúng ta sử dụng nhiều cách khác nhau, một trong cách đó là background cho các thành phần table.

Table – có background với <th> nằm ngang

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 {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <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 background odd, even

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 {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <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 class="even">
        <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 class="even">
        <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 với background odd, even theo chiều từ trái sang phả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 th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle tr th.even {
    background-color: #9cadde;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr td.even {
    background-color: #e1d6c7;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <th>th01</th>
        <th class="even">th02</th>
        <th>th03</th>
        <th class="even">th04</th>
        <th>th05</th>
    </tr>
    <tr>
        <td>td01</td>
        <td class="even">td02</td>
        <td>td03</td>
        <td class="even">td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td class="even">td12</td>
        <td>td13</td>
        <td class="even">td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td class="even">td22</td>
        <td>td23</td>
        <td class="even">td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td class="even">td32</td>
        <td>td33</td>
        <td class="even">td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <td>td41</td>
        <td class="even">td42</td>
        <td>td43</td>
        <td class="even">td44</td>
        <td>td45</td>
    </tr>
</table>
</body>
</html>

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

 

Table – có background với <th> nằm dọc

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

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

 

Table với background odd, even

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 {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <th>th01</th>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr class="even">
        <th>th02</th>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <th>th03</th>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr class="even">
        <th>th04</th>
        <td>td31</td>
        <td>td32</td>
        <td>td3</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <th>th05</th>
        <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 với background odd, even của cả <th> và <td>

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 {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle tr.even th {
    background-color: #9cadde;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <th>th01</th>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr class="even">
        <th>th02</th>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <th>th03</th>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr class="even">
        <th>th04</th>
        <td>td31</td>
        <td>td32</td>
        <td>td3</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <th>th05</th>
        <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:

 

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.