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. 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.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:
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. 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:
Download file để thực hànhrowspan để hợp nhất nhiều phần tử của các hàng khác nhau.
Html viết:
Hiển thị trình duyệt:
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. 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:
Download file để thực hànhrowspan để 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 |