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:
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
colspan và rowspan 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>