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

Use HTML and CSS to create your own warm man "Dabai"

Solution to the error message "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" when storing emoticons in MySQL

Preface This article mainly introduces the soluti...

A brief discussion on HTML table tags

Use HTML and CSS to create your own warm man "Dabai"

Solution to EF (Entity Framework) inserting or updating data errors

Detailed explanation of the use and difference between relative and absolute in HTML

VM VirtualBox virtual machine mount shared folder

Details about the like operator in MySQL

How to implement the Vue mouse wheel scrolling switching routing effect

Explaining immutable values in React

How to create an index on a join table in MySQL

Introduction to the use of the indeterminate property of the checkbox

Detailed explanation of the decimal padding problem of decimal data type in MySQL

Recommend

Basic tutorial on controlling Turtlebot3 mobile robot with ROS

Analyze several common solutions to MySQL exceptions

Optimizing the slow query of MySQL aggregate statistics data

JS quickly master ES6 class usage

Solution to overflow:hidden failure in CSS

MySQL data insertion optimization method concurrent_insert

Three useful codes to make visitors remember your website

vue-table implements adding and deleting

SQL implements LeetCode (180. Continuous numbers)

Solution to the error message "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" when storing emoticons in MySQL

How to prevent computer slowdown when WIN10 has multiple databases installed

Detailed explanation of how to connect Java to Mysql version 8.0.18

In-depth explanation of Mysql deadlock viewing and deadlock removal

How to quickly query 10 million records in Mysql

Summary of some common configurations and techniques of Nginx