Classes are groups of styles the web team has already defined to make web pages more attractive. They are applied with the class attribute. Take this lovely little table:
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
The HTML code of the table contains a
table
element and several trs
tds
and ths.Yes, it's nice... but it'd look better if we added some style. So we'll give it a class. The first step is to find it within the HTML Source of the page. To do that, click the "HTML code" tab of the WYSIWYG editor, and look for the text in your table. You'll notice it has the same text as the web page, plus a slew of tags. Don't be intimidated—text can't hurt you!
Once you've found it, change the table tag to the following:
<table class="elegant">
It should look like this:
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
Pretty, huh? But we're not done. Elements can have multiple classes if they are separated by a space. So if we wanted to make the table the width of the window we could change that table start tag to
<table class="elegant full">
And voilà! We have this:
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
If it still needs more, we could make the cells appear as a grid with
<table class="elegant full grid">
What about a caption for the table? You can't add a caption element with the WYSIWYG editor, but you can do it easily in the HTML code. Immediately after the table start tag add a caption element with your caption:
<table class="elegant full grid"><caption>Your Caption Here</caption>
And there you have it:
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
One last final touch. Say you table was a big part of your web page. You could make the caption large like a section heading by giving the caption element a class of big:
<table class="elegant full grid"> <caption class="big">Your Caption Here</caption>
Yields:
| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
How about that? A beautiful table ready to be shown off. Many
classes are available that have not been listed here. View them at the Stylesheet Reference. Next, learn how to use div tags to make captioned images and pull quotes.
