In HTML, tables are defined by the <table> tag. Each table has several rows (defined by the <tr> tag), and each row is divided into several cells (defined by the <td> tag). The letters td refer to table data, that is, the contents of data cells.
1. Basic content of the form
Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.
HTML table tag:
Let me give you a simple example first:
<h4>One column:</h4><tableborder=1><tr><td>100</td></tr></table><h4>One row and three columns:</h4><tableborder=1>< tr><td>100</td><td>200</td><td>300</td></tr></table><h4>Two rows and three columns:</h4><tableborder=1 ><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td ><td>600</td></tr></table>
The final result presented is as follows:
2. How to merge cells
1. Merge across columns
The keyword colspan such as: <tdcolspan=2></td> means to merge this column and the next column of this column;
Example 1:
<tableborder=1><tr><th>Header 1</th><th>Header 1</th><th>Header 1</th></tr><tr><td>Text 11 </td><tdcolspan=2>Text 12</td></tr><tr><td>Text 21</td><td>Text 22</td><td>Text 23</td>< /tr><tr><td>Text 31</td><td>Text 32</td><td>Text 33</td></tr></table>
The results presented are as follows:
Example two:
If you change the code in the above example <tdcolspan=2>Text 12</td> to <td>Text 12</td>
<tableborder=1><tr><th>Header 1</th><th>Header 1</th><th>Header 1</th></tr><tr><td>Text 11 </td><td>Text 12</td></tr><tr><td>Text 21</td><td>Text 22</td><td>Text 23</td></tr ><tr><td>Text 31</td><td>Text 32</td><td>Text 33</td></tr></table>
The results presented are as follows:
Example three:
If the example 1 code <td>Text 11</td><tdcolspan=2>Text 12</td> is changed to <tdcolspan=3>Text 11</td>
<tableborder=1><tr><th>Header 1</th><th>Header 1</th><th>Header 1</th></tr><tr><tdcolspan=3> Text 11</td></tr><tr><td>Text 21</td><td>Text 22</td><td>Text 23</td></tr><tr><td> Text 31</td><td>Text 32</td><td>Text 33</td></tr></table>
The results presented are as follows:
2. Cross-bank merger
The keyword rowspan such as: <tdrowspan=2></td> means to merge this row and the next row of this row; the method is similar to cross-column merging, so I will give you a simple example.
<tableborder=1><tr><th>Header 1</th><th>Header 1</th><th>Header 1</th></tr><tr><tdrowspan=2> Text 11</td><td>Text 12</td><td>Text 13</td></tr><tr><td>Text 22</td><td>Text 23</td>< /tr><tr><td>Text 31</td><td>Text 32</td><td>Text 33</td></tr></table>
The results presented are as follows:
Summarize:
(1) Comparing Example 1 and Example 2, the tables will be merged only if the merge table keyword (colspan or rowspan) is added;
(2) Comparing Example 1 and Example 3, it can be concluded that the number after the keyword indicates the number of tables to be merged;
(3) Determination of the cell position after merging:
For example, if three columns of text 11, text 12, and text 13 are merged, the cell after merging will be counted as text 11;
For example, if text 12 and text 13 are merged, the cell after merging will be counted as text 12.