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

CSS Viewport Units for Fast Layout

CSS Viewport units have been around for the past ...

Initial settings after installing Ubuntu 16 in the development environment

The office needs Ubuntu system as the Linux devel...

A brief talk about React Router's history

If you want to understand React Router, you shoul...

Vue+openlayer5 method to get the coordinates of the current mouse slide

Preface: How to get the coordinates of the curren...

Tutorial on installing rabbitmq using yum on centos8

Enter the /etc/yum.repos.d/ folder Create rabbitm...

Thumbnail hover effect implemented with CSS3

Achieve resultsImplementation Code html <heade...

Summary of methods to include file contents in HTML files

In the forum, netizens often ask, can I read the ...

About the problem of vertical centering of img and span in div

As shown below: XML/HTML CodeCopy content to clip...

Simple Implementation of HTML to Create Personal Resume

Resume Code: XML/HTML CodeCopy content to clipboa...

Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT

Sometimes it is slow to download large network fi...

Solution to the problem of the entire page not being centered when using margin:0 auto in HTML

I wrote a jsp page today. I tried to adjust <di...

Javascript to achieve drumming effect

This article shares the specific code of Javascri...

Vue3 Documentation Quick Start

Table of contents 1. Setup 1. The first parameter...

Solution to the problem of eight hours difference in MySQL insertion time

Solve the problem of eight hours time difference ...

Detailed explanation of CSS child element fixed positioning solution relative to parent element

Basic Concepts Absolute positioning: An element b...