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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td2 | td03 | td04 | td05 | |
| td11 | td12 | td13 | td14 | td15 |
| td21 | td22 | td23 | td24 | td25 |
| td31 | td32 | td33 | td34 | td35 |
| td41 | td42 | td43 | td44 | td45 |
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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td2 | td03 | td04 | td05 | |
| td11 | td12 | td13 | td14 | td15 |
| td21 | td22 | td23 | td24 | td25 |
| td31 | td32 + td33 + td34 + td35 | |||
| td41 | td42 | td43 | td44 | td45 |
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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td11 | td02 | td03 | td04 | td05 |
| td12 | td13 | td14 | td15 | |
| td21 | td22 | td23 | td24 | td25 |
| td31 | td32 | td33 | td34 | td35 |
| td41 | td42 | td43 | td44 | td45 |
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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td11 | td02 | td03 | td04 | td05 |
| td12 | td13 + td22 + td32 | td14 | td15 | |
| td21 | td23 | td24 | td25 | |
| td31 | td33 | td34 | td35 | |
| td41 | td42 | td43 | td44 | td45 |
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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td11 | td02 | td03 + td04 | td05 |
| td12 | td13 + td22 + td32 | td14 | td15 |
| td21 | td23 | td24 | td25 |
| td31 | td33 | td34 | td35 |
| td41 + td42 + td43 + td44 | td45 |
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:
Học Web Chuẩn
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
width: 100%;
}
.tableStyle td {
padding: 10px;
}
| td01 + td02 + td11 + td21 | td03 | td04 | td05 | |
| td13 + td23 + td33 + td14 + td24 + td34 | td15 | |||
| td21 | td22 | td25 | ||
| td31 | td32 | td35 | ||
| td41 | td42 | td43 | td44 | td45 |