This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

Four, tables,

4.1. Functions of tables

Tables are still a common label, but are not used for layout. They are often used to display tabular data. ** Because it can make the data display very neat, very readable.

A clean, simple table can make a lot of data look organized. Div layouts can do the same, but they’re not as convenient as tables. Take the recent hot fund (if you need this script, please talk to me privately) :

4.2 create a table

In an HTML web page, to create a table, you need to use the tags associated with the table.

<table>
  <tr>
    <td>Text inside a cell</td>.</tr>.</table>
Copy the code

There are three basic pairs of HTML tags in the syntax above: table, tr, and TD. They are the basic tags for creating a table

1. Table is used to define a table label.

2. The TR tag is used to define rows in the table and must be nested within the table tag.

3. Td is used to define cells in the table and must be nested within the <tr></tr> tag.

4. The letter TD refers to table data, the contents of data cells, and now we know that the best place for a table is to store data.

4.3 table properties

There are some attributes in the table that we don’t use very often, but keep in mind cellspacing and cellPadding.

4.4 Case 1

We have said so much, talk is not the drop, let’s do a simple case to consolidate.

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>The name</th>   <th>gender</th> <th>age</th>  </tr>
   <tr>  <td>Andy lau</td> <td>male</td> <td>55</td>  </tr>
   <tr>  <td>Aaron kwok</td> <td>male</td> <td>52</td>  </tr>
   <tr>  <td>Jacky cheung</td> <td>male</td> <td>58</td>  </tr>
   <tr>  <td>The dawn</td>   <td>male</td> <td>18</td>  </tr>
   <tr>  <td>Liu xiaoqing</td> <td>female</td> <td>63</td>  </tr>
</table>
Copy the code

4.5 Table header labels

Typically, header cells are in the first row or column of the table, and the text is bold and centered.

If we want to define the table header, we simply use the table header tag <th></th> instead of the corresponding cell tag < TD ></ TD >. Th is also a cell, but unlike normal TD cells, it centers and boldes the text inside it.

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>The name</th> 
			<th>gender</th>
			<th>The phone</th>
		</tr>
		<tr>
			<td>wang</td>
			<td>female</td>
			<td>110</td>
		</tr>
		<tr>
			<td>Xiao Ming</td>
			<td>male</td>
			<td>120</td>
		</tr>	
	</table>
Copy the code

4.6. Table title

If we want to draw a table with a title, we can simply define it with a label.

<table>
   <caption>I'm the table title</caption>
</table>
Copy the code

Note:

1. The Caption element defines the table title, which is usually centered and displayed above the table.
2. The Caption tag must follow the table tag.
3. The label only makes sense if it exists in a table.

4.7. Merge cells

4.7.1 overview,

Merging cells is one of the most common operations we do, but it’s not very complicated. We generally merge in two ways:

1. Rowspan =” Number of merged cells “.
2. Cross-column merge: colspan=” Number of merged cells “.

4.7.2 Three steps of merging cells

1. First determine whether to merge across rows or columns.
2. < TD colspan=”3″>
3. Delete extra cells cells

4.8. Table division structure

For a more complex table, the structure of the table is relatively complex, so the table is divided into three parts: header, text and footnotes. These three parts are marked with thead, tbody and tfoot respectively, so as to better distinguish the table structure.

4.9,