CSS- Table

For better look and feel, we can apply style on HTML TABLES. In designing table using CSS, there are some CSS properties that are widely used :

  • border
  • border-collapse
  • padding
  • width and height
  • text-align
  • color
  • Border

    We use the border property to specify table border in css.Here is a example below which specifies a black border for <table>, <th>, and <td> elements:

    Example :-

    Result

    Firstname Lastname
    Peter Griffin
    Lois Griffin

    Border-collapse

    We can collapse all borders in one border only, by the help of border-collapse property,

    Example :-

    Consider a simple style sheet file with a name mystyle.css having the following rules ?

    Result

    Firstname Lastname
    Peter Griffin
    Lois Griffin

    Padding

    We use the padding property of CSS to control the space between the border and the content in a table.here is a example by using the padding property on and elements:

    Example

    Result

    The padding Property

    This property adds space between the border and the content in a table.

    Firstname Lastname Savings
    Peter Griffin $100
    Lois Griffin $150
    Joe Swanson $300
    Cleveland Brown $250

    Width and Height

    The Width and height property of CSS in table defines the width and height of a table.

    Example

    Result

    The width and height Properties

    Set the width of the table, and the height of the table header row:

    Firstname Lastname Savings
    Peter Griffin $100
    Lois Griffin $150
    Joe Swanson $300
    Cleveland Brown $250

    Text-align

    Horizontal Alignment

    In table, the text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.</p>

    Example

    Result

    The text-align Property

    This property sets the horizontal alignment (like left, right, or center) of the content in th or td:

    Firstname Lastname Savings
    Peter Griffin $100
    Lois Griffin $150
    Joe Swanson $300
    Cleveland Brown $250

    Vertical Alignment

    In table, the vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

    Example

    Result

    The vertical-align Property

    This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.

    Firstname Lastname Savings
    Peter Griffin $100
    Lois Griffin $150
    Joe Swanson $300
    Cleveland Brown $250