HTML table_Powernode Java Academy

To draw a table in HTML, use the table tag

tr means row
td indicates column
th means table header, which is usually used for column name.

Here is an example.

<html>
    <head>
        <title>Table in html</title>
    </head>
    <body>
        <p>Horizontal header</p>
        <table border="1">
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
         <tr>
            <td>zdd</td>
            <td>30</td>
            <td>male</td>
         </tr>
         </table>
         <p>Vertical header</p>
         <table border="1">
         <tr>
            <th>Name</th>
            <td>autumn</td>
         </tr>
         <tr>
            <th>Age</th>
            <td>30</td>
         </tr>
         <tr>
            <th>Gender</th>
            <td>famale</td>
         </tr>
        </table>
    </body>
</html>

Rendering

Horizontal header

Name	Age	Gender
zd	30	male

Vertical Header

Name	autumn
Age	30
Gender	female

Borderless table

If you do not specify the border attribute when defining a table, the table will have no borders.

<table>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</table>

Rendering

zd	30
ddz	27

Empty cells

If no content is specified for a cell, the cell will be empty and have no border, as shown below, which is not very beautiful.

zd	30
	27

What if it is solved? The method is to add spaces to empty cells. Since HTML ignores extra spaces, we cannot add spaces directly, but need to add   nbsp to represent spaces.

<table border="1">
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td>20</tr>
</table>

Rendering

zd	30
	20

Table with title

Use the caption attribute, but it seems that there cannot be spaces in the title, otherwise it will wrap when displayed!

<table border="1">
<caption>My form</caption>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td><td>20</td></tr>
</table>

My Form

zd	30
	20

Tables that span rows or columns

Use colspan to span lines

<table border="1">
<tr><th>Name</th><th colspan="2">Phone</th></tr>
Bill Gates 555 77 854 555 77 855
</table>

Name	Telephone
Bill Gates	555 77 854	555 77 855

Using rowspan to span columns

<table border="1">
<tr><th>Name</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Telephone</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>

Nested tables

The table tag can be nested, which means that you can create a table within a table by adding a table tag to a tr or td tag.

<<: Basic ideas for finding errors in Web front-end development

>>: Problems encountered when updating the auto-increment primary key id in Mysql

Detailed steps for deploying Microsoft Sql Server with Docker

HTML table_Powernode Java Academy

Detailed steps for deploying Microsoft Sql Server with Docker

Detailed explanation of the example of exporting data from a specified table in MySQL

A brief discussion on how to solve the depends_on order problem in Docker-compose

Detailed explanation of nodejs built-in modules

How to package the project into docker through idea

Use the CSS Paint API to dynamically create resolution-independent, variable background effects

Example code of how to create a collapsed header effect using only CSS

Summary of several important performance index calculation and optimization methods for MySQL

Vue Virtual DOM Quick Start

Detailed explanation of Bootstrap grid vertical and horizontal alignment

Recommend

Example of troubleshooting method to solve Nginx port conflict

JavaScript Objects (details)

How to build a complete samba server in Linux (centos version)

Summary of CSS counter and content

js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations

Detailed steps to deploy SpringBoot projects using Docker in Idea

Summary of common functions of PostgreSQL regular expressions

v-html rendering component problem

Detailed explanation of MySQL foreign key constraints

A complete list of meta tag settings for mobile devices

WeChat applet realizes the effect of shaking the sieve

MySQL 8.0.22 installation and configuration graphic tutorial

Basic structure of HTML documents (basic knowledge of making web pages)

How to deploy services in Windows Server 2016 (Graphic Tutorial)

How to redirect to https through nginx load balancing