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

HTML n ways to achieve alternate color code sample code

HTML table_Powernode Java Academy

HTML n ways to achieve alternate color code sample code

Vue implements a simple magnifying glass effect

HTML+CSS to achieve drop-down menu

Use Visual Studio Code to connect to the MySql database and query

How to use the EXPLAIN command in SQL

Implementation of Single Div drawing techniques in CSS

Detailed example of sharedWorker in JavaScript to achieve multi-page communication

Implementation example of uploading multiple attachments in Vue

Detailed explanation of JavaScript object conversion to primitive value

Summary of some common configurations and techniques of Nginx

Recommend

HTML uses form tags to implement the registration page example code

MySQL transaction isolation level details

Detailed steps to install the specified version of docker (1.12.6) using rpm

How to check and organize website files using Dreamweaver8

A detailed introduction to the use of block comments in HTML

The relationship between JS constructor and instantiation and prototype introduction

WeChat applet development practical skills: data transmission and storage

About CSS floating and canceling floating

Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS

Detailed explanation of common methods of Vue development

Example code for using text-align and margin: 0 auto to center in CSS

Graphical tutorial on Maven installation and configuration under Windows (including localized warehouse configuration)

How to use uni-app to display buttons and search boxes in the top navigation bar

Steps to install superset under win10 system

Standard summary for analyzing the performance of a SQL statement