(HTML learning record): table

• Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher 
• Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26

table of Contents

Table (will use)

Create table

Table attributes

Header cell label th

Table title caption

Merge cells (difficulty)

2 ways to merge cells

Merge cell order

Trilogy of Merge Cells

Summary table

Table division structure (understand)

Table knowledge points overview map

---

Table (will use)

• Table function:
  • Existence is reasonable. The tabular form is still a commonly used label, but it is not used for layout. It is common to display and display table format data .
  • Because it can make the data display very regular and very readable.
• Especially when displaying data in the background, it is very important to use the table skillfully . A refreshing and simple table can show complex data in a very organized manner. Although the div layout can also be done, there is always no convenient table.

Create table

• The basic syntax for creating a table:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

• To deeply understand the composition of tables, rows, and cells.
• In the above grammar, there are three basic pairs of HTML tags, namely table, tr, and td. They are the basic tags for creating a table. They are indispensable, and they are explained in detail below.

table	Used to define a table label
tr	Used to define the rows in the table, must be nested in the table tag
td	Used to define cells in the table, must be nested in the <tr></tr> tag

• The letter td refers to table data , which is the content of data cells. The most suitable place for the table is to store data .

• to sum up: 
  • The main purpose of the table is to display special data
  • A complete table consists of table labels (table), row labels (tr), cell labels (td), and no column labels
  • Only <td></td> cells can be nested in <tr></tr>
  • <td></td> tag, he is like a container, can hold all the elements

Table attributes

• There are some attributes of the table that we don't use frequently, here we focus on cellspacing and cellpadding .

 

• We often have a saying that the three parameters are 0, and our three parameters, border cellpadding cellspacing, which we usually develop, are 0.

• Case

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

Header cell label th

• effect:
  • Generally, the header cell is located in the first row or column of the table, and the text is bold and centered
• grammar:
  • Just use the header tag <th></th> to replace the corresponding cell tag <td></td>. 

• Case :

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
	</table>

• th is also a cell, but it is different from a normal td cell, it will center and bold the text in itself

Table title caption

• Definition and usage

<table>
   <caption>我是表格标题</caption>
</table>

• note:
  • The caption element defines the title of the table , usually the title will be centered and displayed on the table
  • The caption tag must immediately follow the table tag
  • This tag only has meaning in the table

Merge cells (difficulty)

2 ways to merge cells

Interbank merger	rowspan = "Number of merged cells"
Merge across columns	colspan = "Number of merged cells"

Merge cell order

• The order of merging is in the order of top and bottom, left and right

Trilogy of Merge Cells

• First determine whether to merge across rows or columns
• According to find the target cell on a first-down on the first left and right and then write on the merger as well as the number of cells you want to merge
  • 比如 ： <td colspan="3"> </td>
• Delete extra cells

Summary table

Label name	definition	Description
<table></table>	Form label	Just a square box
<tr></tr>	Table row label	The row label only makes sense inside the table label
<td></td>	Cell label	The cell label is a container-level element, you can put anything
<th></th>	Header cell label	It’s still a cell, but the text inside will be centered and bold
<caption></caption>	Table title tag	The title of the table, follow the table, and align the center of the table
clospan 和 rowspan	Merge attributes	Used to merge cells

1. Tables provide a method for defining tabular data in HTML.
2. The table consists of cells in rows.
3. There are no column elements in the table, and the number of columns depends on the number of cells in the row.
4. Don't worry about the appearance of the table, that is the role of CSS.
5. Table learning requirements: Able to write the table structure by hand, and be able to merge cells simply.

Table division structure (understand)

• For more complex tables, the structure of the table is relatively complicated, so the table is divided into three parts: header, body and footnotes. And these three parts are respectively marked with: thead, tbody, tfoot, so as to better distinguish the table structure

• note:
  • <thead></thead>: Used to define the head of the table. Used to put things like titles. <thead> must have a <tr> tag inside!
  • <tbody></tbody>: Used to define the body of the table. Put the data body.
  • <tfoot></tfoot> Put footnotes of the table and the like.
  • The above tags are all placed in the table tag.

Table knowledge points overview map