TABLE tags (TAGS) detailed introduction

TABLE tags (TAGS) detailed introduction
Basic syntax of the table

<table>...</table> - defines a table
<tr> - defines a table row
<th> - defines the table header
<td> - defines the table element (the specific data of the table)

Table with borders:


Copy code
The code is as follows:

<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C


Table without borders:

Copy code
The code is as follows:

<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C

Table Span

Table elements spanning multiple columns <th colspan=#>


Copy code
The code is as follows:

<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Morning Menu
Food Drink Sweet
A B C

Table elements spanning multiple rows <th rowspan=#>



Copy code
The code is as follows:

<table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
Morning Menu Food A
Drink B
Sweet C

Table size settings

<table border=#>

Border size settings:


Copy code
The code is as follows:

<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border width=# height=#>

Table size settings:


Copy code
The code is as follows:

<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border cellspacing=#>

Table element gap setting:


Copy code
The code is as follows:

<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border cellpadding=#>

Table internal blank settings:


Copy code
The code is as follows:

<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

Alignment/layout of text within a table

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

Copy code
The code is as follows:

<table border width=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>

Food Drink Sweet
A B C

<tr valign=#>

<th valign=#> #=top, middle, bottom, baseline

<td valign=#>

Copy code
The code is as follows:

<table border height=100>
<tr>
<th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</table>

Food Drink Sweet Other
A B C D

Alignment/layout of tables on the page (Floating Table)

<table align=left>


Copy code
The code is as follows:

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

My favorites...<br> cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

<table align=right>

Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

<table vspace=# hspace=#> #=space value


Copy code
The code is as follows:

<table align="left" border vspace=20 hspace=30>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

My favorites...<br> cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

Table title

<caption align=#> ... </caption> #=left, center, right

Copy code
The code is as follows:

<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Lunch

Food Drink Sweet
A B C

<caption valign=#> ... </caption> #=top, bottom

valign=top is default.


Copy code
The code is as follows:

<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C
Lunch

<<:  Detailed explanation of CSS complex selectors and CSS font styles and color attributes

>>:  JavaScript Advanced Programming: Variables and Scope

Recommend

Simple encapsulation of axios and example code for use

Preface Recently, when I was building a project, ...

Vue implements button switching picture

This article example shares the specific code of ...

Detailed explanation of linux crm deployment code

Linux basic configuration Compile and install pyt...

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

This article uses an example to describe how to c...

Implementing carousel effects with JavaScript

This article shares the specific code for JavaScr...

MySQL full-text index to achieve a simple version of the search engine example code

Preface Only Innodb and MyISAM storage engines ca...

Solve the problem that some configuration files in /etc are reset after the docker container is restarted

1. The three files /etc/hosts, /etc/resolv.conf a...

Navigation Design and Information Architecture

<br />Most of the time when we talk about na...

Introduction to the B-Tree Insertion Process

In the previous article https://www.jb51.net/arti...

Detailed explanation of Java calling ffmpeg to convert video format to flv

Detailed explanation of Java calling ffmpeg to co...

Centos7.5 installs mysql5.7.24 binary package deployment

1. Environmental preparation: Operating system: C...

A brief discussion on the problem of Docker run container being in created state

In a recent problem, there is such a phenomenon: ...

Docker container time zone error issue

Table of contents background question Problem ana...

How to deploy kafka in docker

Table of contents 1. Build Docker 2. Enter the co...

Implementation steps for docker deployment lnmp-wordpress

Table of contents 1. Experimental Environment 2. ...