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

Sliding menu implemented with CSS3

Result:Implementation code: <!DOCTYPE html>...

Complete steps to implement face recognition login in Ubuntu

1. Install Howdy: howdy project address sudo add-...

Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

Table of contents 1. Parent component passes valu...

Mysql implements three functions for field splicing

When exporting data to operations, it is inevitab...

Solve the problem that the directory mounted by docker cannot be read and written

Use the following command to create a container a...

Detailed steps for building Portainer visual interface with Docker

In order to solve the problem mentioned last time...

Docker binding fixed IP/cross-host container mutual access operation

Preface Previously, static IPs assigned using pip...

CSS3 sets a mask for the background image and solves the problem of mask style inheritance

In many cases, you need to process the background...

Basic syntax of MySQL index

An index is a sorted data structure! The fields t...

How to use Spark and Scala to analyze Apache access logs

Install First you need to install Java and Scala,...

A simple example of how to implement fuzzy query in Vue

Preface The so-called fuzzy query is to provide q...

Example code for implementing a QR code scanning box with CSS

We usually have a scanning box when we open the c...

Introduction to Common XHTML Tags

<br />For some time, I found that many peopl...

Detailed explanation of why v-if and v-for in Vue are not recommended to be used together

This article mainly introduces why v-if and v-for...

Usage of MySQL time difference functions TIMESTAMPDIFF and DATEDIFF

Usage of time difference functions TIMESTAMPDIFF ...