Posts Tagged ‘tables tutorial’
Internet - Sunday, August 10, 2008 22:52 - 2 Comments
Basic HTML tables tutorial
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
Ad Sponsor
