IMG-LOGO
Home Course Tables in CSS

Tables in CSS

by MH RISHAD - 31 Jan 2021
IMG

The see of an HTML table can be incredibly moved forward with CSS:

Company Contact Country
Alter banko Maria zones England
Berglunds soliders Christina berkon Italy
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel oper Roland Orange Denmark
Island Trading Oppos Helen Mark jones USA
Königlich Essen Jones Chan Cramer Japan

To indicate table borders in CSS, utilize the border property.

The example below specifies a black border for

,, andelements:

Firstname Lastname
Parker Jonas
Grece Mark

 

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

Full-Width Table

The table over might appear little in a few cases. In case you wish a table that ought to span the whole screen (full-width), include width: 100% to the component:

Firstname Lastname
Parker Jonas
Grece Mark

Example

table {
  width: 100%;
}

Double Borders

Notice that the table in the examples above have double borders. This is because both the table and theandelements have separate borders.

To remove double borders, take a look at the example below.


Collapse in Table Borders

The border-collapse property sets the table borders would be collapsed into a single border:

table {
  border-collapse: collapse;
}

If you only want a border around the table, only specify the border property for

:

 

Firstname Lastname
Parker Jonas
Grece Gren

table {
  border: 2px solid Green;
}

Thank You

Share:

Leave a Comment

Required fields are marked *