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:
|
|
||
|
|
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.
© Claudia Faulk. Updated 6.18