“This is the 8th day of my participation in the August Gwen Challenge.

Think about how we draw our own tables, do we draw a box first, then draw each row, and then draw the cells. How do YOU draw an HTML table? It’s the same way. Now let’s learn how to draw a table using HTML.

<table>The label

The

tag is used to define the table, which is the big box outside. 

Align Left Center Right HTML5 is not supported. HTML 4.01 is deprecated. Specifies the alignment of the table with respect to surrounding elements. Bgcolor RGB (x,x,x) # XXXXXX colorName HTML 4.01 is deprecated. Specifies the background color of the table. Border 1 "" Specifies whether the table cell has a border. Cellpadding Pixels HTML5 is not supported. Specifies the space between the edge of a cell and its contents. Cellspacing Pixels HTML5 is not supported. Specify white space between cells. Frame void Above Below Hsides LHS RHS vsides box border HTML5 not supported. Specify which part of the outer border is visible. Rules None Groups Rows All HTML5 not supported. Specify which part of the inner border is visible. Summary text HTML5 is not supported. Specify a summary of the table. Width Pixels % HTML5 is not supported. Specify the width of the table.Copy the code

<tr>The label

The tag defines a row of cells in an HTML table that should come in pairs.

Attribute Value Description align Right left Center justify char HTML5 is not supported. Define the alignment of table rows' contents. Bgcolor RGB (x,x,x) # XXXXXX colorName HTML 4.01 is deprecated. Specifies the background color of the table rows. Char character HTML5 is not supported. Specifies which character is used for text alignment. Charoff number HTML5 is not supported. Specifies the offset of the first aligned character. Valign Top Middle Bottom Baseline HTML5 is not supported. Specifies the vertical alignment of the contents of the table rows.Copy the code

<td>The label

The < TD > tag defines standard cells in an HTML table.

Attribute Value Description align left right Center justify char HTML5 is not supported. Specifies the horizontal alignment of cell content. Bgcolor RGB (x,x,x) # XXXXXX colorName HTML 4.01 is deprecated. Specifies the background color of the cell. Char character HTML5 is not supported. Specifies by which character the content is aligned. Charoff number HTML5 is not supported. Specifies the offset of the aligned character. Colspan number Specifies the number of columns that a cell can span. Headers Header_ID specifies one or more table header cells associated with the cell. HTML5 is not supported. HTML 4.01 is deprecated. Sets the height of the cell. Nowrap NowRap HTML5 is not supported. HTML 4.01 is deprecated. Specifies whether the contents of a cell are folded. Rowspan Number Sets the number of rows that a cell can span. Scope Col ColGroup Row RowGroup HTML5 not supported. Defines methods to associate table header cells with data cells. Valign Top Middle Bottom Baseline HTML5 is not supported. Specifies the vertical arrangement of cell content. Width Pixels % HTML5 is not supported. HTML 4.01 is deprecated. Specifies the width of the cell.Copy the code

If you need to span content across multiple rows or columns, use the colSPAN and RowSPAN properties.

<th>The label

The tag represents the header portion of the HTML table, and the contents of the tag are displayed in bold. The < TD > tags are all cell tags,

  • <th>Header cell – Contains header information. The text in the element is usually bold and centered.
  • <td>Standard cells – Contain data, and the text in the element is usually plain left-aligned text.
Attribute Value Description align left right Center justify char HTML5 is not supported. Specifies the horizontal alignment of header cell contents. Bgcolor RGB (x,x,x) # XXXXXX colorName HTML 4.01 is deprecated. Specifies the background color of the table header cell. Char character HTML5 is not supported. Specifies by which character the content is aligned. Charoff number HTML5 is not supported. Specifies the offset of the aligned character. Colspan number Specifies the number of columns that a table header cell can span. Headers Header_ID specifies one or more table header cells associated with the table header cell. HTML5 is not supported. HTML 4.01 is deprecated. Specifies the height of a table header cell. Nowrap NowRap HTML5 is not supported. HTML 4.01 is deprecated. Specifies whether the contents of a table header cell are folded. Rowspan Number Specifies the number of rows that a table header cell can span. Scope Col COLGroup ROW RowGroup Specifies whether a table header cell is a row, column, rowgroup, or the head of a column group. Valign Top Middle Bottom Baseline HTML5 is not supported. Specifies the vertical arrangement of table header cell contents. Width Pixels % HTML5 is not supported. HTML 4.01 is deprecated. Specifies the width of the table header cell.Copy the code

Take a look at a simple example:

< table border = "1" > < th colspan = "4" > student achievement table < / th > < tr > < td > student id < / td > < td > < / td > in math Chinese achievement < / td > < td > < td > English < / td > < / tr > < tr > <td>1</td> <td>95</td> <td>88</td> <td>79</td> </tr> <tr> <td>2</td> <td>92</td> <td>85</td> <td>88</td> </tr> </table>Copy the code