Posts in current category

CSS Table (Form)


May 03, 2021 21:00 CSS


Table of contents


The CSS table


Using CSS can greatly improve the appearance of HTML tables.

November 2020 November 2019 The program language Grade Change
1 2 C 16.21% +0.17%
2 3 Python 12.12% +2.27%
3 1 Java 11.68% -4.57%
4 5 C++ 7.60% +1.99%
5 5 C # 4.67% +0.36%
6 6 Visual Basic 4.01% -0.22%
7 7 Javascript 2.03% +0.10%
8 8 Php 1.79% 0.07%
9 16 R 1.64% +0.66%
10 9 Sql 1.54% +0.15%

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}


Try it out . . .

Table border

Specify the CSS table border, using the border

The following example specifies the black border th td elements of a table:

table, th, td
{ border: 1px solid black; }

Try it out . . .

Note that the table in the example above has a bilateral box. This is because tables th / td elements have separate boundaries.

To display a single border for a table, use the border-collapse

Collapse the border

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

table
{ border-collapse:collapse; }
table,th, td { border: 1px solid black; }

Try it out . . .


Table width and height

width and height define the width and height of the table.

The following example is a table that sets the height of a 100% width, 50 pixels of th elements:

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

Try it out . . .


Table text alignment

Text alignment and vertical alignment properties in a table.

Text-align properties set horizontal alignment, like left, right, or center:

td
{ text-align:right; }

Try it out . . .

Vertical alignment properties set vertical alignment, such as top, bottom, or middle:

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

Try it out . . .


Table fill

If you control the border between spaces in the contents of the table, you should use the fill properties of the td and th elements:

td
{ padding:15px; }

Try it out . . .


Table color

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

table, td, th
{ border:1px solid green; }
th
{ background-color:green; color:white; }

Try it out . . .


CSS Table (Form)

More instances

Make a personality table
This example shows how to create a personality table.

Set the location of the table title
This example shows how to locate a table title.

Specify the width and height of the table

This example shows how to specify the height and width of a table.