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
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>