Creating HTML Tables The Easy Way

I often talk about how I’m not very technically inclined and not anywhere close to being a programmer. I keep my designs simple because I enjoy writing much more than figuring out the techy stuff.

While I use CSS on 2CreateAWebSite.com for my links, headings, colors, etc. I’ve never taken full advantage of its capabilities.

And while I’ve read how much easier CSS makes managing tables, I usually ignored it and kept building my tables in HTML – a.k.a. the old fashioned way.

[sidebar]

CSS stands for Cascading Style Sheets and it’s a page that sits on your server that tells the browser how to apply different style attributes on your site.

From hyperlink colors, font size, margin widths, line spacing, you name it. You can do everything with CSS and it’s very convenient because when you edit an attribute on your style sheet, it automatically updates that style on your entire site.

[/end sidebar]

Well, my site’s most recent template came with a style sheet and had a few table styles already declared. In English, that simply means if I use the appropriate tag from the style sheet, I could generate a table on my site.

I won’t go into creating an entire style sheet in this blog post. There are several sites out there that can give you the basics and even a free template to start with. W3Schools has some great tutorials. I just want to show you how easy it is to create a table and define its style so it makes updating your site a breeze.

In my style sheet, here’s the following code that defines how my tables look.

.table {

background:#EED9A8;

color: #000000;

border:1px solid #D29C1A;

width: 430px;

}

The above code is what goes inside my style sheet to tell the browser how to display the table on my site. Notice it defines the background color, text color, border size, border color and table width.

Of course there are other attributes you can add to the table if you wish (padding, etc.), but it’s up to you how many or few attributes you’d like to use.

Now, in order to display the table on my site, I simply add the following code inside my HTML page…

<div class=”table”> Insert text inside table </div>

That small bit of code will render a table with the attributes I declared in my style sheet. Notice the div class is named “table” because that’s what I called it in my stylesheet. Had I named it table5, then I would have used <div class=”table5″>.

As I mentioned before, the beauty of using CSS for tables is when you’re ready to update your table designs, you simply change the attributes in your style sheet, and Voila! – you’ve implemented a global table change throughout your site.

So if you aren’t using style sheets yet, I hope I’ve given you enough of a preview to whet your appetite. Using CSS allows you to make global template changes in a heartbeat and it helps your pages load faster too.

Head on over to W3Schools’ site to learn more.