Search Alma: > Log-in to my Alma


HTML Baby Steps 2: Classy Web Pages

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 1Cell 2
You will see the text of your table interspersed amongst tags and other text
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 1Cell 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 1Cell 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:

Your Caption Here
Header 1 Header 2
Cell 1Cell 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:

Your Caption Here
Header 1 Header 2
Cell 1Cell 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.

 

Alma College’s teacher preparation program was rated “exemplary” in 2007 following a comprehensive review by the Michigan Department of Education.

 

Student Profile

Terra Teague

Terra Teague
Graduation: 2008
Major: Business Administration
From: Monroe
Interests: Business Simulations, Athletics

Terra’s Spring Term experience in China is a tremendous help understanding the relationship the U.S. has with one of its largest trading partners. The business administration major from Monroe has seen first hand the economic effects on southeast Michigan of low-cost imports and Chinese monetary policies.