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

Seven solutions for classic distributed transactions between MySQL and Golan

A brief discussion on HTML table tags

Seven solutions for classic distributed transactions between MySQL and Golan

Docker configures the storage location of local images and containers

JavaScript to achieve the effect of clicking on the self-made menu

Nginx+FastDFS to build an image server

JavaScript realizes the effect of mobile modal box

Detailed explanation of the usage and difference between nohup and & in Linux

Native js custom right-click menu

How to communicate between WIN10 system and Docker internal container IP

MySQL infobright installation steps

Hello dialog box design experience sharing

Recommend

The latest MySQL 5.7.23 installation and configuration graphic tutorial

Some settings of Div about border and transparency

Web design experience: Make the navigation system thin

Solution to the problem that Xshell cannot connect to the virtualBox virtual machine

Docker container time zone adjustment operation

The problem of Chinese garbled characters appearing when connecting to MySQL database in Idea

Two ways to clear float in HTML

A brief analysis of Linux resolv.conf

MySQL database table and database partitioning strategy

Solution to the IP address not being displayed under Linux

Configure selenium environment based on linux and implement operation

Detailed explanation of the code for implementing six sieve styles using HTML grid layout

Three examples of blur background effects using CSS3

Centos7 installation of FFmpeg audio/video tool simple document

mysql query data from one table and insert it into another table implementation method