CSS tables

CSS Table

Using CSS can greatly improve the appearance of HTML tables.

CSS Table Properties

CSS table properties can help you greatly improve the appearance of your table.

Table border

To set the table border in CSS, please use the border property.

The following example sets blue borders for table, th and td:

table, th, td

{

border: 1px solid blue ;

}

Please note that the table in the above example has a double line border. This is because the table, th and td elements have independent borders.

If you need to display the table as a single line border, please use the border-collapse attribute.

Collapse border

border-collapse property sets whether the border of the table is collapsed into a single border or separated

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>

Table width and height

The Width and height properties define the width and height of the table.

The following example is a table that sets the width of 100% and the height of the th element to 50 pixels:

table 
{
width:100%;
}
th
{
height:50px;
}

Table text alignment

Text alignment and vertical alignment properties in tables.

text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}

Vertical alignment property sets vertical alignment, such as top, bottom or middle:

td
{
height:50px;
vertical-align:bottom;
}

Table fill

If in To control the borders between spaces in the content of the table, the padding attributes of the td and th elements should be used:

td
{
padding:15px;
}

Table color

The following example specifies the color of the border, and the text and background colors of the th element

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:pink;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p> </body> </html>

submit Reset Code

Automatic operation

CSS tables

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]