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

>>: