CSS

CSS Tables

CSS/CSS Tables

The looking of the HTML table can be greatly improved with CSS. You have already met a few properties that are commonly used with tables.

Table Borders

The border properties define the size and style of the border (located between the padding and the margin).

Example

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

Result


Notice that the table in the example above has double borders because both the table and the th or td elements have separateborders. For display a single border for the table use border-collapse property.

Collapse Tables

The border-collapse property sets the table borders are collapsed into single border or separated each.

Example

 table, td, th {
      border: 1px solid;
    }
    table {
      width: 50%;
      border-collapse: collapse;
    }

Result



Table Width and Height
Width and height of a table is defined by the width and height properties.

Example

  table{
      border: 1px solid red;
      width: 100px;
    }
    tr{
     border: 1px solid green;
      height: 50px;
    }
   th{
     border: 1px solid blue;
      height: 50px;
    }
    td{
     border: 1px solid black;
      height: 50px;
    }

Result


Table Text Alignment

The text alignment  is used to align the text in the table by text-align and vertical-align properies.

The text-align property sets the horizontal alignment. Like left,right or center.

Example

   th{
      width: 100px;
      border: 1px solid black;
      text-align: left;
     }
    td{
      width: 100px;
      border: 1px solid black;
      text-align: center;
     }

Result


The vertical-align property sets the vertical alignment. Like top, bottom or middle.

Example

  th{
      width: 100px;
      border: 1px solid black;
      vertical-align: top;
     }
    td{
      width: 100px;
      border: 1px solid black;
      vertical-align: bottom;
     }

Result


Table Padding
Use the padding property to control the space between the border and content in a table on the td and th elements.

Example

  th{
      border: 2px solid;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }
   td{
       border: 2px solid;
      padding: 10px;
    }

Result



Table Color

The CSS background-color property permits you to color background of a table, row and cells.

The CSS color property permits you to color text of a table, row and cells.

Example

table th,td{
      width: 200px;
        border: 1px solid red;
        background-color: #007bb5;
        color: #000;
       }


Result





Previous
Next
Leave a comment
No Cmomments yet