<< .. Go to : : Home : : Exercise 7 : : Demo 7A : : Demo 7B : : Demo 7C : : Demo 7D : : Demo 7E : : TAGS : : All Class Demos .. >>

Exercise 7 Demo: Part D : Tables

STYLES: Table Options - Border-style, Border-color and Border-width

Often websites use tables with the borders turned off, so you cannot really tell they are there. But you can also make your tables more interesting by changing the borders. We will use CSS styles and classes to do this. There are many different border-styles we can use:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • none

Note the table.dot - this is a class of table. Since it is a class it can be used multiple times on one page. Change the name of the class and change the type of border and you have a different table to use.

<style type="text/css">

table.dot {

border-style: dotted;

border-color: #660066;

border-width: 10px;

}

</style>

This is what the html code would look like:

<table class="dot">

You could also add more style information to the CSS or attributes to the html.


Here are some examples of tables with different borders:

A Dashed Border

A Dotted Border

A Double Border

A Grooved Border


You can also define the CSS styles for any of the other elelments we used in this exercise. HTML cellpadding (space inside the table) would be padding in CSS and for cell spacing (space around the table) you would use margins.

You might define an alternate row color for complicated tables to make it easier to follow a line of information.

A Table of Information
Some info Here Some info Here Some info Here
More info Here More info Here More info Here
Some info Here Some info Here Some info Here
Some info Here Some info Here Some info Here


A Table of Information
Some info Here Some info Here Some info Here
More info Here More info Here More info Here
Some info Here Some info Here Some info Here
Some info Here Some info Here Some info Here

Want to review? Part C of Demo 7.

Or... Part B of Demo 7.

Or... Part A of Demo 7.

Go to the Exercise 7 page.

© Claudia Faulk. Updated 6.18