|
||||
 |
 |
|
||
 |
||||
|
||||||||||||
|
|
Learning HTML - Using Tables By Kenneth Wilson, WiredBusinessDesign.com. Copright © 2009. All rights reserved. WHEN WRITING HTML, TABLES are the key to placing and moving content (text, images) on a webpage. Think of a table as a grid or spreadsheet that is placed over an illustrated drawing of what you want your website to look like.
An example of a simple table is a spreadsheet with 2 rows and 2 columns.
Without using a table, the content on a page would just fill the page from top to bottom, without any organization. HTML vs. "Click and Build" Website Programs Knowing HTML gives you a greater control and flexibility with the layout of a website. HTML -- if you haven't heard -- is a well-known coding language for website design. Tables, as this article is about, are HTML commands that help organize and situate content on a web page.
Getting your HTML skills fine tuned can greatly enhance your success on the web. Places like Phoenix College offer classes in HTML where you can turn skills into a career.
In HTML, every design element you plan to use begins with a "START" tag and ends with an "END" tag.
The code in the text box above tells the webpage to "START" a table and "END" a table. Please note that the end tag always starts with a / (forward slash). What makes learning HTML relatively easy, is understanding that just about every HTML command is going to begin with a "START" tag and "END" tag. Please note though that there is not enough information in the sample code above, to tell the webpage to display 2 rows and 2 columns, from our example image above. The entire code should look like this:
In the text area above, I use a style of spacing and line breaks that makes the table code easy to read. I go one line down for each TR (table row) command, and then one line and one TAB over for each TD (table cell) command.
In the code above, please notice that there are a total of two "TR"s (table rows) and two "TD"s (table cells) per table row. This gives us a table with two table rows, and two columns in each row.
There are height and width commands that can be added to the "TABLE" tag itself, and / or each "TD". The height and width can be set by either percentage or pixels, or both. Here's an example of a TABLE with height and width commands and a percentage and pixel setting (notice the height is set in pixels):
There are certain things that a table can / cannot do when using height and width commands and multiple table rows with multiple table cells. For example, if you have a TABLE with two table rows, the table cells MUST be set at the same width, as the table cells in the row above. A table must also have the same number of table cells, per row -- UNLESS you use a "COLSPAN command. In the next example, is a table with two table rows, and only one table cell in the top row, with two table cells in the bottom row. Unless this is coded with the "COLSPAN" command, it will not display the way you intend on it displaying.
The cellpadding command and cellspacing command will let you move each table cell's content, or simply create more distance between table cells. Please note that too much cellpadding will crowd your content (try setting the CELLPADDING to ZERO if that happens).
WEBDESIGN ARTICLES FOR WEBMASTERS: | |
|
|
 |
|
|
