Detailed explanation of HTML tables

Detailed explanation of HTML tables

Function: data display, table application scenario.

<table> table<tr> row<td> cell

Format:

<table>

  <caption>...</caption><!-Table title, centered-->

  <tr>

    <th>...</th>... <!-Table header, content centered, bolded-->　

  </tr>

  <tr>

    <td>...</td>...

  </tr>

</table>

Table structure tag: It is more convenient to load part and display part.

Divide into three parts: header (thead), body (tbody), footer (tfoot) These three tags cannot affect the layout

<table>

  <caption>...</caption>

  <thead>

  <tr>

    <th>...</th>... <!-Table header, content centered, bolded-->　

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>...</td>...

  </tr>

  </tbody>

  <tfoot>

  <tr>

    <td>...</td>...

  </tr>

  </tfoot>

</table>

table tag attributes

tr tag attributes 

<table>


  <tr>

    <td colspan="2"> ...</td>

    <td> ...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table> 

<table>

  <tr>

    <td> ...</td>

    <td rowspan="2"> ...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

Description: 1. Complete table structure 2. Put it in the <td> tag

<table>

  <tr>

    <td> ...</td>

    <td>　

       <table>

        <tr>

          <td> ...</td>

          <td>.</td>

        </tr>

      </table>

    </td>

  </tr>

</table>

1. Use table nesting as little as possible.

2. Use tables that span rows and columns as little as possible.

Increase the overall maintenance cost of the code.

When using tables for web page structure layout, borders are generally not set

This is the end of this article about the detailed explanation of HTML tables. For more relevant HTML table content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  The difference and introduction of ARGB, RGB and RGBA

>>: 

Recommend

MySQL users and permissions and examples of how to crack the root password

MySQL Users and Privileges In MySQL, there is a d...

Solve the problem of black screen when starting VMware virtual machine

# Adjust VMware hard disk boot priority Step 1: E...

Summary of the differences between Html, sHtml and XHtml

For example: <u> This has no ending characte...

MySQL optimization: use join instead of subquery

Use JOIN instead of sub-queries MySQL supports SQ...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

How to use rem adaptation in Vue

1. Development environment vue 2. Computer system...

Deeply understand the current status of HTML5 development in mobile development

"We're writing our next set of mobile pr...

Keep-alive multi-level routing cache problem in Vue

Table of contents 1. Problem Description 2. Cause...

About the VMware vcenter unauthorized arbitrary file upload vulnerability (CVE-2021-21972)

background CVE-2021-21972 An unauthenticated comm...

Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)

VMware vSphere is the industry's leading and ...

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Table of contents introduction Ideas Establish ID...

vue-pdf realizes online file preview

This article example shares the specific code of ...

Detailed explanation of InnoDB storage files in MySQL

Physically speaking, an InnoDB table consists of ...

Detailed explanation of MySQL master-slave inconsistency and solutions

1. MySQL master-slave asynchrony 1.1 Network Dela...

Implementation of inserting millions of records into MySQL database within 10 seconds

First, let’s think about a question: To insert su...