HTML Table

 The indispensable element of HTML webpage design is the table. Usually the table is used for layout layout, and the usage of the table contains several important tags, namely table, tr and td. It is a complete form, the following is a simple form example.

<table border="1">
　<tr>
　<td>Here you can put the table content</td>
　</tr>
</table>

The results are as follows

Here you can put the table content

In the example, the <table> and </table> tags are used to wrap the content. The <tr></tr> tag represents a row, and the <td></td> tag represents a column. For clarity, we The border="1" setting is also added to the table, which means that the border thickness of the table is 1. In actual use, you can also set it to other values. For example, border="0" will not display the border. Please note that HTML syntax must use a start tag and an end tag to wrap the content. The start tag and the end tag are equivalent, and neither is indispensable.

In addition to writing a simple table, we can also set the width, height or border style of the table. To do these settings, you must first understand several elements that can control the table, such as width, border, background... etc.

• width：Control the width of the table
• border：Control the thickness of the table border
• background：Control background image
• colspan：Control cell spans several fields
• rowspan：Control the cell to span several fields vertically

Then we write a few examples

Example of a table with two fields

<table width="300" border="1">
　<tr>
　<td>Here is the first field</td>
　<td>Here is the second field</td>
　</tr>
</table>

The results are as follows

Here is the first field

Here is the second field

Example of a Table with two rows and two columns

<table border="1">
　<tr>
　<td>Here is the first field of the first row</td>
　<td>Here is the second field of the first row</td>
　</tr>
　<tr>
　<td>Here is the first field of the second row</td>
　<td>Here is the second field in the second row</td>
　</tr>
</table>

The results are as follows

Here is the first field of the first row	Here is the second field of the first row
Here is the first field of the second row	Here is the second field in the second row

Then we turn the first row into a field

<table border="1">
　<tr>
　<td colspan="2">Here is the first line</td>
　</tr>
　<tr>
　<td>Here is the first field of the second row</td>
　<td>Here is the second field in the second row</td>
　</tr>
</table>

The results are as follows

Here is the first line
Here is the first field of the second row	Here is the second field in the second row

Finally, make a two-column Table, the first column rowspan="2", the second column has two rows

<table border="1">
　<tr>
　<td rowspan="2">Here is the first line</td>
　<td>Here is the first field of the second row</td>
　</tr>
　<tr>
　<td>Here is the second field in the second row</td>
　</tr>
</table>

The results are as follows

Here is the first line	Here is the first field of the second row
	Here is the second field in the second row

Further reading

HTML Table colspan attribute

HTML Table rowspan attribute

HTML table cellspacing attribute

HTML Table cellpadding attribute

HTML table adds background image syntax

HTML Table table background color

HTML Table table border color and style design