Basic HTML tables tutorial

Written by on Sunday, August 10, 2008 22:52 - 2 Comments

HTML basic tables tutorial

Tables are probably the easiest way to organize information on a web page.  Most basic HTML editors allow the use of tables, often in a visual format known as WYSIWYG (what you see is what you get).  Before getting comfortable with an HTML editor, though, it is important to understand what you are actually doing.  As anyone who writes HTML code will tell you, using an editor is great, but there are times and tweaks that will require understanding the code anyway.  A table is convenient as it allows the designer to add columns or rows of information, creating, in effect, categories for different information.

Tables are placed between the <body></body> tags of a web page.  They can be readily mixed with the main page content, and modified to suit your needs.  Creating a table can be easy, or it can be very complex, as each cell is treated as a mini-web page, and has it’s own background and page properties.  So not only can a table be aligned and manipulated as part of the page, each cell is likewise an indivudal component of the table.  This article will introduce simple table creation, and help to illustrate the potential of tables within a web page.

<table border=”1″>
Any combination of HTML tags may be used within a table, such as links, images, and all display and alignment commands.
</table>

Multiple rows may be placed in a table with the <tr> command.  By default, a table contains a single row, and each table row can contain any commands used on a web page, making each table row essentially a mini-web page.  Once you have created a table row, you’ll need to instruct the contents to be interpreted as actual content.  Do this using the table data <td> command.  Cells are added by using multiple <td></td> commands inside a row.

<table border=”1″>
<tr bgcolor=”red”>
<td>
<h3>This is the first row.</h3>
</td>
</tr>
<tr bgcolor=”blue”>
<td>
<h4>This is row 2, column one.</h4>
</td>
<td>
<h4>This is row 2, column 2</h4>
</td>
</tr>
</table>

The table above has two rows, one with text displayed in headline 3, and the second row has two cells, using headline 4.  A border has been set at 1 pixel wide, and be any number from 0 to 255, although a border thickness is rarely higher than about 5, and usually even smaller.  A border of “0” means that no border is used.

Note that a color change was made to each row.  In addition to changing the background and text color, text can be aligned to left, right, and center, and use any headline size.  Indeed, every cell in a table may be treated as a web page that behaves and looks differently than other cells or rows, or even the main page the table is found on.

Article written by MyComputerAid.com



2 Comments

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Froix
Aug 20, 2008 6:30

These are the codes that can easily get confusing especially if you don’t use it much like I do. I prefer using just CSS when designing but it’s always good to know this stuff just in case. Kind of sad to be designig websites without knowing the most basics of html codes.

Nomad
Aug 24, 2008 0:32

Tables are used by many basic web design makers, like dreamweaver and frontpage. But I myself don’t like making web pages with tables as they make the pages Bulty and so CSS is the way to go for. You can design amazingly fast pages with CSS.

Leave a Reply

You must be logged in to post a comment.

2003 server - Sep 30, 2008 22:34 - 0 Comments

instant messaging srv records

More In Computers & PC


Microsoft Outlook - Mar 22, 2009 11:22 - 0 Comments

Outlook: Duplicates in Mailbox

More In Computers & PC