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

Mac node deletion and reinstallation case study

Mac node delete and reinstall delete node -v sudo...

How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux

After entering yum in linux, the prompt: -bash: /...

CSS3 achieves various border effects

Translucent border Result: Implementation code: &...

HTML table markup tutorial (9): cell spacing attribute CELLSPACING

A certain distance can be set between cells in a ...

Sample code for changing the color of a png image through a CSS3 filter

This method uses the drop-shadow filter in CSS3 t...

A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service

background: I have done a project before, which r...

Setting up shadowsocks+polipo global proxy in Linux environment

1. Install shadowsocks sudo apt-get install pytho...

How to remove the dotted border when clicking a link in FireFox

I encountered several browser compatibility issue...

Creation, constraints and deletion of foreign keys in MySQL

Preface After MySQL version 3.23.44, InnoDB engin...

Detailed explanation of the usage of compose function and pipe function in JS

Table of contents compose function Array.prototyp...

Solutions to Mysql index performance optimization problems

The optimization created by MySQL is to add index...

Solve the problem that the Node.js mysql client does not support the authentication protocol

Preface The mysql module (project address is http...

Detailed tutorial on installing Docker and docker-compose suite on Windows

Table of contents Introduction Download and insta...

Ant Design Blazor component library's routing reuse multi-tab function

Recently, there has been a growing demand for imp...

Detailed explanation of several methods of installing software in Linux

1. RPM package installation steps: 1. Find the co...