colspan và rowspan

Để merge các thành phần cột và hàng của table, chúng ta sử dụng colspan và rowspan.

Table – colspan

colspan giúp hợp nhất (merge) các phần tử gần nhau của các cộ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 {
    width: 100%;
}
.tableStyle td {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td colspan="2">td01 + td2</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

Sử dụng colspan để hợp nhất nhiều phần tử của các cột khác nhau.

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 {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td colspan="2">td01 + td2</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 colspan="4">td32 + td33 + td34 + 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 – rowspan

rowspan giúp hợp nhất (merge) các phần tử gần nhau của các hà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 {
    width: 100%;
}
.tableStyle td {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td rowspan="2">td01 + td11</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <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:

 

Sử dụng rowspan để hợp nhất nhiều phần tử của các hàng khác nhau.

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 {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td rowspan="2">td01 + td11</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td12</td>
        <td rowspan="3">td13 + td22 + td32</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</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 – Kết hợp colspan và rowspan

colspanrowspan giúp hợp nhất (merge) các phần tử gần nhau của các hàng và các cột trong 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 td {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td rowspan="2">td01 + td11</td>
        <td>td02</td>
        <td colspan="2">td03 + td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td12</td>
        <td rowspan="3">td13 + td22 + td32</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td>td33</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
    <tr>
        <td colspan="4">td41 + td42 + td43 + td44</td>
        <td>td45</td>
    </tr>
</table>
</body>
</html>

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

 

Sử dụng rowspan để hợp nhất nhiều phần tử của các hàng khác nhau.

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 {
    padding: 10px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td colspan="2" rowspan="2">td01 + td02 + td11 + td21</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">td13 + td23 + td33 + td14 + td24 + td34</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td25</td>
    </tr>
    <tr>
        <td>td31</td>
        <td>td32</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 *