Your standard HTML 2 row - 3 column table:
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
</table>
Tables are meant for tabular data.
In some situations I don't need the multiple data cells and rows that a table gives me. Sometimes I just need one data cell or a container to hold my data (text or images or both).
Use a <div>
Adavantages of using a <div> instead of a table:
- Your HTML code is cleaner and less cluttered
- XHTML compliant
- Easier for search engine spiders to dig through to find keyword data
- Tables are the old fashioned way of designing websites - stay current with web design trends.
- One day you can brag to your friends that your site is designed without the use of a table.
Classes are used to differentiate between one CSS style from another.
If I simply create a list in my HTML page...
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
... And then I style the list in my stylesheet...
ul {
list-style: none;
margin: 0.5em 0 1em 2em;
padding: 0;
}
li {
text-align:left;
padding: 0 0 0 20px;
margin:2px 0px;
list-style-type:circle;
list-style-position:outside;
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
color:red;
}
... Every list in my entire site will have this style applied to it.
If I wanted to create a separate style to display the list differently in another page or another section of the same page, I would apply a class to this list.
class="class_name"
Classes are written into your HTML body section as attributes to an HTML tag.
Example:
<p class="class_name">filler text</p>
<div class="royce">filler text</div>
When you create a class it can have any name you choose. Just make sure that the class name is referrenced properly. That means it has the same name in your CSS code and your HTML code.
To save time and to produce changes quicker, the smart way to apply a class style to a specific area of your site would be to surround all that section's code within a <div> tag
Example:
<div class="royce">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
By doing this it saves time from having to write the code like this:
<ul class="royce">
<li class="royce">one</li>
<li class="royce">two</li>
<li class="royce">three</li>
</ul>
Both ways would be accepted, but the first method is more efficient than the next.
To reference this class in the stylesheet I would copy and paste the ul and li styles and simply add the class name ahead of it like this:
.royce ul {
margin: 0.5em 0 1em 2em;
padding: 0;
}
.royce li {
text-align:left;
padding: 0 0 0 20px;
margin:2px 0px;
list-style-type:disc;
list-style-position:outside;
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
line-height:1.25;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
}
The syntax above shows a dot (period) immediately followed by the class name.
I have a <div> named "royce" and all lists within my royce <div> will have these styles applied to it.
In the stylesheet why not style the entire div:
.royce {
background-color:#F5F5F5;
padding:10px;
border:1px solid #000;
}
In the HTML code:
<div class="royce">
<a href="http://www.msn.ca">Click here</a> to go to the MSN website.
</div>
In the CSS code:
.royce {
background-color:#F5F5F5;
padding:10px;
border:1px solid #000;
font:normal 12px/1.25 Verdana, Arial, Helvetica, sans-serif;
color:#666666;
}
.royce a {
font-weight:bold;
text-decoration:none;
color:#0099CC;
}
.royce a:hover {
text-decoration:underline;
color:#CC3300;
}
Before your mouse cursor touches the link, the .royce a styles are shown on the screen. When you "hover" or mouse-over the text link, the a:hover styles are applied.
Copy and paste this code to see for yourself.
Top