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

Vue3 based on script setup syntax $refs usage

Table of contents 1. Vue2 syntax 2. Use of Vue3 1...

Analysis of permissions required to run docker

Running Docker requires root privileges. To solve...

A brief analysis of CSS :is() and :where() coming to browsers soon

Preview versions of Safari (Technology Preview 10...

A brief discussion on the principle of React two-way data binding

Table of contents What is two-way data binding Im...

JavaScript Basics: Scope

Table of contents Scope Global Scope Function Sco...

Example code for CSS to achieve horizontal lines on both sides of the text

This article introduces the sample code of CSS to...

Detailed analysis of replication in Mysql

1.MySQL replication concept It means transferring...

An article teaches you JS function inheritance

Table of contents 1. Introduction: 2. Prototype c...

Differences between ES6 inheritance and ES5 inheritance in js

Table of contents Inheritance ES5 prototype inher...

A brief analysis of using coredump technology to trace the cause of process crashes in Linux

Recently, a problem occurred in the project. The ...

A brief discussion on the underlying principle of mysql join

Table of contents join algorithm The difference b...

MySQL backup table operation based on Java

The core is mysqldump and Runtime The operation i...

Super detailed basic JavaScript syntax rules

Table of contents 01 JavaScript (abbreviated as: ...

Vue.js front-end web page pop-up asynchronous behavior example analysis

Table of contents 1. Preface 2. Find two pop-up c...

Solve the error of starting MongoDB: error while loading shared libraries: libstdc++.so.6:cannot open shared object file:

When starting MongoDB, the prompt is: error while...