A brief discussion on HTML table tags

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:

<table>
<tr><th></th></tr>
<tr><td><td></tr>
</table>

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:

<table>
<tr><th scope="col"></th></tr>
<tr><td><td></tr>
</table>

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

Recommend

Detailed explanation of the usage of setUp and reactive functions in vue3

1. When to execute setUp We all know that vue3 ca...

HTML Several Special Dividing Line Effects

1. Basic lines 2. Special effects (the effects ar...

Detailed explanation of three ways to configure Nginx virtual hosts (based on ports)

Nginx supports three ways to configure virtual ho...

Detailed explanation of Linux rpm and yum commands and usage

RPM package management A packaging and installati...

About WSL configuration and modification issues in Docker

https://docs.microsoft.com/en-us/windows/wsl/wsl-...

After the click event of html hyperlink a, jump to the address pointed to by href

Sometimes, we need to use the hyperlink <a> ...

How to connect XShell and network configuration in CentOS7

1. Linux network configuration Before configuring...

About the problems of congruence and inequality, equality and inequality in JS

Table of contents Congruent and Incongruent congr...

How to deal with the prompt "Operation not permitted" when deleting files in Linux

Colleagues often ask, when deleting files/directo...

Box-shadow and drop-shadow to achieve irregular projection example code

When we want to add a shadow to a rectangle or ot...

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

I was playing with CentOS in a VMware virtual mac...

JS cross-domain solution react configuration reverse proxy

Cross-domain solutions jsonp (simulate get) CORS ...

Detailed explanation of the production principle of jQuery breathing carousel

This article shares the specific process of the j...

Detailed tutorial on installing Docker and nvidia-docker on Ubuntu 16.04

Table of contents Docker Installation Nvidia-dock...

Implementation of CSS text shadow gradually blurring effect

text-shadow Add a shadow to the text. You can add...