CSS Tutorial: Creating Tables within a Web Page with Cascading Style Sheets
(CSS)
Tables are commonly used in HTML because they define
the lay out of the web page. Instead of just having a heading and text that
runs from left to right and top to bottom, we can have pages that have a
block of text here, and another block of text over there, and so on. But
the use of tables can be very complex and time consuming - and they aren't
necessarily search engine friendly. So, instead of using tables, learn to
use CSS classes and include the <div> tag where it is appropriate to
do so in your HTML code.
Here is what we have so far:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid"
media="all">
<!--
body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a: link {color: #008000; text-decoration: none}
a: visited {color: #cccccc; text-decoration: none}
a: active {color: #ff0000; text-decoration: underlined}
a: hover {color: #3300ff; text decoration: underlined}
-->
</style>
</head>
<body>
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created. </p>
</body>
</html> |
Now, let's assume that we want to add a navigational menu on the left hand
side of the page. Normally, using HTML, we would create this with the use
of tables. But we don't have to do that with CSS. Let's say that we want
to include the navigational menu, which will have four links and a green
background.
The first thing we want to do is to set up a class. A
class in CSS is a period followed by a codename for the class. In this example,
we are going to set up a class called navigation, so, our code will look
like this:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid"
media="all">
<!--
body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a: link {color: #008000; text-decoration: none}
a: visited {color: #cccccc; text-decoration: none}
a: active {color: #ff0000; text-decoration: underlined}
a: hover {color: #3300ff; text decoration: underlined}
.leftcolumn { position: absolute; width: 150px; top-margin: 20px; left-margin:
10px; background-color: #009900 }
-->
</style>
</head>
<body>
</body>
</html> |
The class that we just added is in bold green in the
sample above. Don't forget the period in front of the codename. Now, in this
class, we have a left column with an absolute position. This means that the
element will appear exactly and absolutely where we want it to appear, which
in this case is 20px from the top of the page and 10 pixels from the left
side. However, that isn't quite enough.
Now, in the HTML code, we have to specify where we want
our navigation to appear. This is done by using the .leftcolumn code
name we set up. Since we've set our position as absolute, the CSS will align
it just as we specified.
The following code should be added to our HTML document:
<a href="link1.html>Link
1</a>
<a href="link2.html>Link 2</a>
<a href="link3.html>Link 3</a>
<a href="link4.html>Link 4</a> |
Next, we need to place the codename into the HTML coding
where we would like the CSS navigational menu to appear:
| <DIV
Class="leftcolumn"></DIV> |
Here is how the HTML document will look:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid"
media="all">
<!--
body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a: link {color: #008000; text-decoration: none}
a: visited {color: #cccccc; text-decoration: none}
a: active {color: #ff0000; text-decoration: underlined}
a: hover {color: #3300ff; text decoration: underlined}
.leftcolumn { position: absolute; width: 150px; top-margin: 20px; left-margin:
10px; background-color: #009900 }
-->
</style>
</head>
<body>
<DIV Class="leftcolumn">
<a href="link1.html>Link 1</a><br>
<a href="link2.html>Link 2</a><br>
<a href="link3.html>Link 3</a><br>
<a href="link4.html>Link 4</a><br>
</DIV>
<u><H1>This Is
Content</H1></u> |
Since we have created a left column, however, we must
also create a right column. It's actually already there. That portion of
the page where we want content. We just have to assign a class to it, as
follows:
Add to CSS:
.rightcolumn { position: absolute; top-margin: 20px; left-margin: 150px;
background-color: #FFFFFF }
Add to HTML:
<DIV class="rightcolumn">
<H1><u>This Is
Content</u></H1>
<p>This is content that others will be able
to see when they visit your webpage. When content is pasted in, it won't
have any formatting. It will just be text that reads from left to right,
in one long paragraph. It should have a heading, followed by the actual content.
</p>
<p>In this section, you will learn how to
<b><i>format</i></b>
the text so that it is easier to read and understand. Use any article or
content that you have written, and simply copy and paste it into the HTML
document that you have created.
</p>
</DIV>
</body>
</html> |
 |
 |
Previous |
Next |
 An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading
Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted
and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks
with Cascading Style Sheets (CSS)
Creating Tables within a
Web Page with Cascading Style Sheets (CSS)
Cascading Style
Sheets (CSS) Classes and ID's
Cascading Style Sheet
Codes Chart - Property Index
Web Development Tutorials
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart
|
| eTips Member Login |
 |
|
Enter your email address and password to enter the private membership
area:
Lost Password?
|
Daily News For
Webmasters
|
