logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

HTML Fundamentals - Tables

Guest Author - Elizabeth Connick

Back in the days before CSS (Cascading Style Sheets) web designers used tables to arrange their page elements. Nowadays divs are the recommended placement element, and tables should generally be reserved for holding data – that being their intended usage. However, there are still times when it is much easier to throw together a table than to nest several divs together like Spanish dolls.
The HTML table’s root element is the table tag:

<table>
</table>

Within that tag, you will add rows and columns to achieve your desired layout. The ‘tr’ tag designates a table row, while the ‘td’ tag designates a column. A simple one row, one column table would look like this:

<table>
<tr>
<td>This is a table</td>
</tr>
</table>

A table with one row and two columns looks like this:

<table>
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>

You can use the ‘height’ and ‘width’ attributes to set your table cells’ sizes, or leave them as is (in which case they will be just large enough to hold whatever content you put in them). The ‘cellpadding’ and ‘cellspacing’ attributes give your table contents a bit of space between them; cellpadding adds empty space between the cell wall and its contents, while cellspacing adds empty space in between cell walls. You can only set these two attributes at the table level, meaning that all cells in a given table will have the same padding/spacing setting.
The ‘border’ attribute is also set at the table level and defines the size and color of the table’s gridlines. The default color attribute gives you a light gray, 3-D border around each cell that looks like this:

<table border="1">
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>

Want to have a header row with one column, while the other rows have two? You can use the 'colspan' attribute to indicate how many columns a particular cell should span. The code will look something like this...

<table border="1">
<tr>
<td colspan="2">Header row</td>
</tr>
<tr>
<td>This is the first column</td>
<td>This is the second column</td>
</tr>
</table>

... and will display the following table:
Header row
This is the first columnThis is the second column


You can use the 'rowspan' attribute to achieve the opposite effect (a column that spans multiple rows).
This site needs an editor - click to learn more!

Add HTML+Fundamentals+%2D+Tables to Twitter Add HTML+Fundamentals+%2D+Tables to Facebook Add HTML+Fundamentals+%2D+Tables to MySpace Add HTML+Fundamentals+%2D+Tables to Del.icio.us Digg HTML+Fundamentals+%2D+Tables Add HTML+Fundamentals+%2D+Tables to Yahoo My Web Add HTML+Fundamentals+%2D+Tables to Google Bookmarks Add HTML+Fundamentals+%2D+Tables to Stumbleupon Add HTML+Fundamentals+%2D+Tables to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

Symbols, Math and Greek Character Entities

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor