HTML we learned the table, to the web page only text, unlike the usual page to see the title header with a background and border line of the table, today we learn how to set the style of the table

Table properties

Table border: Set it to each cell using the border property.

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

Table border merge: After adding borders, we found that it is a bilateral box, and we need to use the border-collapse property to merge borders. This will only work if we set it to table.

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

Table width: The table width can be set to a fixed value. If the column width is not set, it is automatically allocated according to the content. You can also set a fixed width for individual columns.

table{
 width:100%
}
Copy the code

Set a fixed width for individual columns: Set the width for the first column of each row to 100px.

table tr td:nth-child{
 width:100px;
}
Copy the code

Set the background: The background is set to a specific cell.

table tr td{
 background:red;
}
Copy the code

Font alignment: Sets the alignment of text within a cell.

td,th{
 text-align:left;
}
Copy the code

Cell merge

Merge columns: Use the colSPAN attribute to merge columns. Note that if a column is merged, one column must be deleted or another column must be created. Eg: <th colspan="2"> </th>Copy the code
Merge rows: Use the RowSPAN attribute to merge rows, which actually merge the cells of the next row. After adding the row merge, drop a cell down the row. Eg: < td rowspan = "2" > B < / td >Copy the code

Make a table with row merge and column merge how to make a table with row merge and column merge. The source code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Word-wrap: break-word; "> <title>Document</title> <style> table{border-collapse: collapse; } table,th,td{ border:solid 1px red; text-align:center; } < / style > < / head > < body > < table > < tr > < th > serial number < / th > < th > group < / th > members of the < th colspan = "2" > < / th > < / tr > < tr > < td > 1 < / td > < td > < / td > a. < td > * * < / td > < td > m < / td > < / tr > < tr > < td > 2 < / td > < td rowspan = "2" > B < / td > < td > and < / td > < td > m < / td > < / tr > < tr > < td > 3 < / td > < td > fifty < / td > < td > m < / td > < / tr > < / table > < / body > < / HTML >Copy the code