This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

It should be noted in advance that CSS is recommended to implement the style of the table. Most of the attributes of the table tag have been deprecated, but browsers can still use them.

What are the complete table tags?

Here is a complete table and its subtags, with < Caption >, , , and so on optional. Less strictly, can also be omitted. Use tr lines and the browser will automatically add tbody at rendering time

is used to group columns and apply the same style. Not commonly used

<table class="my-table">
    <caption>The table title</caption>
    <colgroup>
        <col span="2" class="batman">
        <col>
        <col span="2" class="flash">
    </colgroup>
  <thead>
    <tr>
      <th>head-1</th>
      <th>head-2</th>
      <th>head-3</th>
      <th>head-4</th>
      <th>head-5</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>footer</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>row-1-cell-1</td>
      <td>row-1-cell-2</td>
      <td>row-1-cell-3</td>
      <td>row-1-cell-4</td>
      <td>row-1-cell-5</td>
    </tr>
    <tr>
      <td>row-2-cell-1</td>
      <td>row-2-cell-2</td>
      <td>row-2-cell-3</td>
      <td>row-2-cell-4</td>
      <td>row-2-cell-5</td>
    </tr>
  </tbody>
</table>
Copy the code

.colgroup-1{
    background-color: fuchsia;
}
.colgroup-2{
    background-color:darkorange;
}
Copy the code

Below is the table shown

Td can also be used directly in . It’s not strictly differentiated.

The label	instructions
<th>	Define the table header. Most browsers display the header as bold centered text
<tr>	Define the rows of the table
<td>	Define table cells

Th can be changed to vertical as the first element of each tr line

Vertical header example:

<tr> <th>100</td> </tr> <tr> <th>200</td> </tr> <tr> <th>300</td>
   </tr>
Copy the code

Specifies the border

• Add borders to the entire table

.my-table{
  border: # 000 solid 1px;
}
Copy the code

• The cell specifies the border

.my-table td..my-table th{
    border: # 000 solid 1px;
}
Copy the code

.my-table..my-table tfoot..my-table td..my-table th{
    border: # 000 solid 1px;
}
Copy the code

It is also possible to add table and cell borders directly

, but not recommended.

In a later demonstration, the grouping column is removed from HTML.

Cell spacing (distance between cells)

As you can see above, spacing between cells causes cellspacing to be double-spaced. Specifying the cellspacing attribute to 0 on the table eliminates double-spaced boxes.

<table cellspacing="0" class="my-table">

But cellspacing has also been scrapped.

The same effect can be achieved with CSS border-spacing.

.my-table{
    border-spacing:0;
    /* border-collapse: collapse; * /
}
Copy the code

Or border merge attribute border-collapse: collapse;

Table content margins

Sets the margin between the table cell content and the border to 0.

.my-table{
    border-collapse: collapse;
}
.my-table td{
    padding:0;
}
Copy the code

Set the table property to cellPADDING:

Cellpadding is also an abandoned property, which can be set instead by adding border-collapse: collapse on

; < TD > using the padding property.

Cells span rows and columns

• colspanHorizontal merge Right merge across columns.
• rowspanVertical merger downward merger is to achieve cross-line.

<tbody>
  <tr>
    <td rowspan="2">row-1-cell-1</td>
    <td colspan="3">row-1-cell-2</td>
    <td>row-1-cell-5</td>
  </tr>
  <tr>
    <td>row-2-cell-2</td>
    <td colspan="2">row-2-cell-3</td>
    <td>row-2-cell-5</td>
  </tr>
</tbody>
Copy the code

Failure of cell across rows and columns (Critical)

Sometimes colSPAN or RowSPAN doesn’t work, that is, across rows and columns.

• Method 1: Specify the TD width and height

The easiest way to do this is to specify the width of a single TD, because row and column spans are based on cell comparisons, and row and column spans can be displayed by specifying the width and height of a single TD

If td width is specified as a percentage, it will not work in most cases.

• Method 2:<table>Tag specifiedtable-layout: fixed;

If td width and height are not specified, you can set the CSS property table-layout: Fixed; To make colSPAN or RowSPAN work.

if there is a TD or a TH inside the .