Real Estate Webmasters

REW Community

Formatting Content with CMS Snippets II - Tables and Fonts

Tables and Fonts

In this blog post, we'll continue with using styles to format content. This time, we're having a look at tables and fonts. Keep in mind that while tables may seem like an easy and effective way to format various content, tables are really intended for tabular data, and not design layout.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results.
whatwg.org

The Result

Row1, Column1 Row1, Column2 Row1, Column3
Row2, Column1 Row2, Column2 Row2, Column3
Row3, Column1 Row3, Column2 Row3, Column3
Row4, Column1 Row4, Column2 Row4, Column3

The Explanation

Tables

A basic HTML table consists of the following elements:

   <table>
          <tr>
            <td></td>
          </tr>
    </table>

The previous markup would result in a single column, single row table with noborder, and no data. It consists of 3 elements: <table>, <tr>, and <td>, table, table row, and table data cell, respectively.

Now, let's say we want to have a 4 column table that displays data from 2009, 2010, 2011, and 2012. We would add table cells to the table row, and place the years between the opening <td> and closing </td>, like so:

    <table>
           <tr>
             <td>2009</td>
             <td>2010</td>
             <td>2011</td>
             <td>2012</td>
           </tr>
     </table>

This would result in the following table:

2009 2010 2011 2012


If we want to add borers, we can do so using inline styles, just like we did with text and images, and the same border style properties apply as with images. If we wanted to apply a DarkSlateBlue (#483D8B) , grooved border to our table, we would add the following inline styles to give this effect.

    <table style="border-style: groove; border-color: darkslateblue;" >
 <tr>
 <td>2009</td>
 <td>2010</td>
 <td>2011</td>
 <td>2012</td>
 </tr>
</table>

And the result...

2009 2010 2011 2012


If we want to add the border styles to the cell walls, we have to add them to the cell elements <td style="border-style: groove; border-color: darkslateblue;">. We also wish to add some other attribute, such as width, and text-align.

   <table style="border-style: groove; border-color: darkslateblue; " >
 <tr>
 <td style="border-width: 2px;border-style: groove; border-color: darkslateblue; width: 150px; text-align: center;">2009</td>

   <td style="border-width: 2px;border-style: groove; border-color: darkslateblue; width: 150px; text-align: center;">2010</td>

   <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center;">2011</td>

   <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center;">2012</td>

   </tr>
</table>

Which results in...

2009 2010 2011 2012


There are a lot of fun ways to style tables, simply adding a few attributes. Let's have a look at fonts

Fonts

When adding styles to display various fonts in tables, you can add inline styles to the <tr> tags, just like we did to define border, color, and align attributes. The 3 font attributes we are working with in this tutorial are font-family, font-size, and color.

Generic font-families are serif, sans-serif, cursive, fantasy, and monospace. There are various fonts that fall within these families, such as Times (serif), and Helvetica (sans-serif), and when defining the font-family attribute, it is a good idea to offer a generic font family as an alternative, in case the browser is unable to render the desired font. This can be done using the pattern font-family: 'desired-font', generic-font, such as font-family: 'New Century Schoolbook', serif;

To display the years in our table in 20px, OrangeRed (#FF4500) Impact font, I would simply add the following to the markup...

   <table style="border-style: groove; border-color: darkslateblue;" >
 <tr>
 <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center; color: orangered; font-size: 20px; font-family: 'Impact', fantasy;">2009</td>

   <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center; color: orangered; font-size: 20px; font-family: 'Impact', fantasy;">2010</td>

   <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center; color: orangered; font-size: 20px; font-family: 'Impact', fantasy;">2011</td>

   <td style="border-width: 2px; border-style: groove; border-color: darkslateblue; width: 150px; text-align: center; color: orangered; font-size: 20px; font-family: 'Impact', fantasy;">2012</td>

   </tr>
</table>


Which gives us...

2009 2010 2011 2012

The HTML

   <table>
           <tr>
             <td style="width: 200px; color: #f00; font-family: 'Times New Roman', Times, serif; font-size: 25px; border: 5px outset #ccc;">
         Row1, Column1
             </td>
             <td style="width: 200px; color: #f00; font-family: 'Times New Roman', Times, serif; font-size: 25px; border: 5px outset #ccc;">
         Row1, Column2
             </td>
             <td style="width: 200px; color: #f00; font-family: 'Times New Roman', Times, serif; font-size: 25px; border: 5px outset #ccc;">
         Row1, Column3
             </td>
           </tr>
           <tr>
             <td style="width: 200px; color: #555; font-family: 'Helvetica', sans-serif; font-size: 14px; border: 5px outset #ccc;">
         Row2, Column1
             </td>
             <td style="width: 200px; color: #555; font-family: 'Helvetica', sans-serif; font-size: 14px; border: 5px outset #ccc;">
         Row2, Column2
             </td>
             <td style="width: 200px; color: #555; font-family: 'Helvetica', sans-serif; font-size: 14px; border: 5px outset #ccc;">
         Row2, Column3
             </td>
           </tr>
           <tr>
             <td style="width: 200px; color: #549; font-family: 'Impact'; font-size: 18px; border: 5px outset #ccc;">
         Row3, Column1
             </td>
             <td style="width: 200px; color: #549; font-family: 'Impact'; font-size: 18px; border: 5px outset #ccc;">
         Row3, Column2
             </td>
             <td style="width: 200px; color: #549; font-family: 'Impact'; font-size: 18px; border: 5px outset #ccc;">
         Row3, Column3
             </td>
           </tr>
           <tr>
             <td style="width: 200px; color: #f4a; font-family: 'Script'; font-size: 20px; border: 5px outset #ccc;">
         Row4, Column1
             </td>
             <td style="width: 200px; color: #f4a; font-family: 'Script'; font-size: 20px; border: 5px outset #ccc;">
         Row4, Column2
             </td>
             <td style="width: 200px; color: #f4a; font-family: 'Script'; font-size: 20px; border: 5px outset #ccc;">
         Row4, Column3
             </td>
           </tr>
     </table>

More Examples

Green Text with Darkgray/gray Backgrounds, and a Ridge Boarder

Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row3, Column1 Row3, Column2 Row3, Column3 Row3, Column4
Row4, Column1 Row4, Column2 Row4, Column3 Row4, Column4

The HTML

  <table>
<tr>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row1, Column1
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row1, Column2
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row1, Column3
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row1, Column4
 </td>
</tr>
<tr>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row2, Column1
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row2, Column2
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row2, Column3
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row2, Column4
 </td>
</tr>
<tr>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row3, Column1
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row3, Column2
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row3, Column3
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: gray; color: #0f0;">
 Row3, Column4
 </td>
</tr>
<tr>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row4, Column1
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row4, Column2
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row4, Column3
 </td>
<td style="border: 6px ridge darkgray; width: 150px; background-color: lightgray; color: darkgreen;">
 Row4, Column4
 </td>
</tr>
</table>

Red and Lightblue Text, Checkered Pink/Blue Table Cells and a Double Border

Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row3, Column1 Row3, Column2 Row3, Column3 Row3, Column4
Row4, Column1 Row4, Column2 Row4, Column3 Row4, Column4

The HTML

  <table>
<tr>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row1, Column1
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row1, Column2
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row1, Column3
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row1, Column4
 </td>
</tr>
<tr>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row2, Column1
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row2, Column2
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row2, Column3
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row2, Column4
 </td>
</tr>
<tr>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row3, Column1
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row3, Column2
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row3, Column3
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row3, Column4
 </td>
</tr>
<tr>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row4, Column1
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row4, Column2
 </td>
<td style="border: 6px double orange; width: 150px; background-color: darkblue; color: lightblue;">
 Row4, Column3
 </td>
<td style="border: 6px double orange; width: 150px; background-color: pink; color: darkred;">
 Row4, Column4
 </td>
</tr>
</table>

Script Font-face with Black Background Heading, Alternating Shades of Gray, and Solid White Border

Spring Summer Autumn Winter
Snow Peas Snow Cones Parsnips Tangerines
Butter Lettuce Ice Cream Sweet potatoes Goose
Ginger Green Salad Pumpkins Mussels
Watercress Corn Apples Shortbread

The HTML

  <table>
<tr>
<td style="border: 5px solid white; border: 5px solid white; width: 150px; background-color: black; color: white; font-family: 'Script', cursive; font-size: 22px; text-align: center;">
 Spring
 </td>
<td style="border: 5px solid white; border: 5px solid white; width: 150px; background-color: black; color: white; font-family: 'Script', cursive; font-size: 30px; text-align: center;">
 Summer
 </td>
<td style="border: 5px solid white; border: 5px solid white; width: 150px; background-color: black; color: white; font-family: 'Script', cursive; font-size: 30px; text-align: center;">
 Autumn
 </td>
<td style="border: 5px solid white; border: 5px solid white; width: 150px; background-color: black; color: white; font-family: 'Script', cursive; font-size: 30px; text-align: center;">
 Winter
 </td>
</tr>
<tr>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Snow Peas
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Snow Cones
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Parsnips
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Tangerines
 </td>
</tr>
<tr>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Butter Lettuce
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Ice Cream
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Sweet potatoes
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Goose
 </td>
</tr>
<tr>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Ginger
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Green Salad
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Pumpkins
 </td>
<td style="border: 5px solid white; width: 150px; background-color: lightgray; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Mussels
 </td>
</tr>
<tr>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Watercress
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Corn
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Apples
 </td>
<td style="border: 5px solid white; width: 150px; background-color: #eeeeee; color: black; font-family: 'Comic Sans', sans-serif; font-size: 15px;">
 Shortbread
 </td>
</tr>
<tr>
</table>

Andrew | Customer Support Representative
Real Estate Webmasters
P: 250-753-9893 | F: 250-753-7209

Visitor Feedback

There are currently 4 Responses to this blog entry.

Groove gaveston | Estellasenvy
[...]Blogs on Groove gaveston Two Days in Galveston | Sara's Musings Formatting Content with CMS Snippets II – Tables and Fonts – rew … Lankford Love: Galveston Recap and Group Pic Hilton Galveston is location | Websites rated for[...]
REW Melissa
REW Melissa

I was recently told that tables don't always format well on mobile versions of sites and can be difficult for users to read. Do you have suggestions that would help minimize the impact of this?

rew andrew
rew andrew

Hi Melissa,

Tables are often given absolute values, and don't necessarily scale well with the resolution on mobile devices.

We seem to be in somewhat of a transitionary stage with web development, working more towards reponsive web design, as Google's Webmaster Central Blog clearly suggests is the future of web development, versus device specific HTML.

I'm not sure if we're quite at that point yet, and it would definitely be a few levels above the intended audience for this tutorial, but in my personal opinion CSS layouts with intelligent use of responsive design may very well obsolete the table element at some point over the next couple of years.

Formatting Content with CMS Snippets I - Text and Images - rew andrew's Blog
[...]<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> Formatting Content with CMS Snippets II - Tables and Fonts[...]

Add Your Comment…


Blog Categories
Author's Stats
  • Blog Entries: 6
  • Total Views: 4,592
  • Unique Views: 3,687
  • Comments Posted: 1
  • Comments Received: 6
Search Listings
rew andrew's Friends
Remax Of Boulder REW Allison
Report Abuse

Real Estate Webmasters