table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
HTML Table
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Defining an HTML Table
An HTML table is defined with the
Each table row is defined with the
tag. A table header is defined with the tag. By default, table headings are bold and centered. A table data/cell is defined with the tag.HTML table
table row
table header
table data/cell
Note: The
elements are the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders 设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示对应的脚本特性(即由原来的双框线变成单框线)
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Adding Cell Padding 限定内容与边框的距离
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
th { text-align: left; }
[Try it Yourself »](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headings_left)
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Name | Telephone | |
---|---|---|
Bill Gates | 55577854 | 55577855 |
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Name: | Bill Gates |
---|---|
Telephone: | 55577854 |
55577855 |
HTML Table - Adding a Caption
To add a caption to a table, use the
tag:Month | Savings |
---|---|
January | $100 |
February | $50 |
Note: The
tag must be inserted immediately after theA Special Style for One Table 定义表格的背景色和填充色等
To define a special style for a special table, add an id attribute to the table:
Firstname | Lastname | Age |
---|---|---|
Eve | Jackson | 94 |
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Styling Tables
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
background-color: black;
color: white;
}
Styling Tables
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Chapter Summary
Use the HTML
Use the HTML
element to define a table rowUse the HTML
element to define a table dataUse the HTML
element to define a table headingUse the HTML
element to define a table captionUse the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table