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>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

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

</body>
</html>
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

CSS: Multiple rules within one style section

This entry is part 4 of 26 in the series Basic CSS

We can define multiple rules for multiple tags.

Using list style types defined in this post, we can expand this to also specify ordered lists.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Lists</title>
    <style type='text/css'>
        ol {
            list-style-type: lower-alpha;
        }

        ul {
            list-style-type: square;
        }</style>
</head>
<body>
<h4>British Pop</h4>
<ol>     
    <li>Cold Play</li>
        
    <li>Depeche Mode</li>
        
    <li>Adele</li>
</ol>
 
<h4>American Rock</h4>
<ul>
    <li>Linkin Park</li>
        
    <li>Nirvana</li>
        
    <li>Metalica</li>
</ul>
 
</body>
</html>

CSS: Applying global style rule to all similar

This entry is part 3 of 26 in the series Basic CSS

Say we have a few unordered lists.  Instead of putting the style in each <ul> tag, we can declare a global style rule for all <ul> tags.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>

    <style type='text/css'>
        ul {
            list-style-type: square;
        }
    </style>

</head>
<body>

<h4>American Rock</h4>
<ul>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

CSS: Applying style to individual tag

This entry is part 2 of 26 in the series Basic CSS

In an earlier HTML example on lists, we have used the style = attribute for ordered and unordered lists.

For example, we have used a square bullet character in an unordered list.

<ul style='list-style-type: square'>
<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
</head>
<body>

<h4>American Rock</h4>
<ul style='list-style-type: square'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>

HTML: Horizontal line styling

This entry is part 17 of 34 in the series HTML

The style attributes you can set for a horizontal line are align, width, size, color.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Special Characters</title>
</head>
<body>

<h3>British Pop</h3>
<hr align='left' width='50%' size='10px' color='red'>
<h3>American Rock</h3>

</body>
</html>


Special Characters

In HTML 5, <hr> represents a thematic break in paragraphs.  We would normally use CSS to style a horizontal line in HTML 5.