HTML Table: Styling a table

This entry is part 12 of 16 in the series HTML Table

You can apply borders by using CSS which is the most consistent method across browsers.

  • The border-width attribute controls the thickness of the border.  Specify a value in pixels
  • The border-color attribute controls the color of the border. Specify a color by name, hexadeimal number or RGB value.
  • The border style attribute controls the line style.  Choose among solid, dotted, dashed, double, groove, ridge, inset, outset or none.
  • To set all three attriubutes at once, use the border attribute and then place the settings after it in this order: width, color, style
  • To format the border sides individually, replace the border attribute with the border-top, border-bottom, border-left or border-right attribute.
<!DOCTYPE html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title> Table</title>

<table style='border-style: dotted; border-color: green; border-width: 2px'>
        <th style='border-style: groove; border-color: red; border-width: 2px'>ID</th>
        <td>Rod Stewart</td>
        <td>Maggie May</td>

Output: Styling Border Using CSS  
I now make a slight change to the table with width=50% and we could see better how a groove border look like for a table.
Output: Groove Border

Series Navigation<< HTML Table: Laying out a page using table
HTML Table: Formatting all tables and cells the same way >>

Leave a comment

Leave a Reply