A brief discussion on HTML table tags

Mainly discuss its structure and some important properties. I will introduce it in a slowly improving way.
1) The basic structure is as follows: <tr> represents a row in a table, and <td> represents a column in a row. When we talk about a column, we can actually think of it as a cell in Word. <th> is actually a cell, but it is used as a table header. Semantically speaking: <td> indicates the data unit in the table, and <th> indicates the title of a column or a row in the table.

Copy code

The code is as follows:

2) A title may be a row title or a column title. How to distinguish them? Need to use the scope attribute scope=row/col.

Copy code

The code is as follows:

3) The table also has its own title <caption>

Copy code

The code is as follows:

<table>
<caption>Table title</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

4) Add summary attribute to the table

Copy code

The code is as follows:

<table summary="This is a table summary">
<caption>Table title</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

5) Table border model and cell default padding.
There are two display modes for table borders: separated and merged. border-collapse: separate/collapse The default style of IE6 is separate and looks like three-dimensional. In reality, each cell has its own independent border. Merge means sharing borders.
table { border-collapse: collapse; }
By default, there is white space between cells. You can use border-spacing to control it, but it is rarely used because IE6 does not support it. IE6
Use cellspacing.

Copy code

The code is as follows:

<table summary="This is a table content summary" cellspacing="0">
<caption>Table title</caption>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

6) Add some rows and columns. And add an id to each <th>.

Copy code

The code is as follows:

<table summary="This is a table content summary" cellspacing="0">
<caption>Table title</caption>
<tr>
<th scope="col" id="name">Name</th>
<th scope="col" id="address">Address</th>
<th scope="col" id="databirthday">Date of Birth</th>
</tr>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
</table>

7) Divide the table logically <thead><tbody><tfoot>. After dividing the table into multiple logical areas, you can use CSS to better control the performance.

Copy code

The code is as follows:

<table summary="This is a table content summary" cellspacing="0">
<caption>Table title</caption>
<thead>
<tr>
<th scope="col" id="name">Name</th>
<th scope="col" id="address">Address</th>
<th scope="col" id="databirthday">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>ewee<td>
<td>hubei<td>
<td>19870102<td>
</tr>
<tr>
<td>rewe<td>
<td>wuhan<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>yichang<td>
<td>19870205<td>
</tr>
<tbody>
</table>

This essay of mine only briefly talks about the structure of the table. I hope it is useful.

<<: How to obtain root permissions in a docker container

>>: Sharing an idea of building a master-slave system for a large MySQL database

A brief discussion on HTML table tags

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

Share CSS writing standards and order [recommended for everyone to use]

Use SWFObject to perfectly solve the browser compatibility problem of inserting Flash into HTML

Detailed explanation of MYSQL log and backup and restore issues

How to install and configure the Apache Web server

Let me teach you how to use font icons in CSS

Install and deploy java8 and mysql under centos7

Definition and function of zoom:1 attribute in CSS

How to reset the password if the Ubuntu 18.04 server password is forgotten or tampered with

jQuery implements simple button color change

Recommend

How to quickly query 10 million records in Mysql

Setting up a proxy server using nginx

How to convert rows to columns in MySQL

HTML meta usage examples

MySQL 5.7.18 installation and configuration method graphic tutorial (CentOS7)

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

How to optimize MySQL query speed

Detailed Example of MySQL curdate() Function

What to do if you forget your mysql password

Reasons and optimization solutions for slow MySQL limit paging with large offsets

Tutorial on Installing Nginx-RTMP Streaming Server on Ubuntu 14

Detailed description of nginx from compilation and installation to configuration file description in Chinese

Example of how to use CSS3 to layout elements around a center point

Explanation of MySQL index types Normal, Unique and Full Text