HTML table's feature is probably one of the most important basic HTML tags you need to learn first. It controls the layout of your web page. Also, learning the properties of <table> is probably one of the most hardest to pick up. Once, you have picked up the concept of HTML tables, you will start looking at how you design, and how other things are put together, so you can replicate it on your web page. I look at magazine articles or ads, and seee HTML tables. I see the layout, and how I can acheive what print has been doing for years to acomplish it online with limited space, and browser issues.
With most web page editors, such as Dreamweaver, most of us have gotten lazy or use to dragging and dropping, and allowing the editor to control the layout and table. I would suggest using notepad and trying to accomplish the same without a editor, such as Dreamweaver.
HTML table is made up of rows and cells. Almost the same concept as an excel spreadsheet.
The rows are coded with the <tr> tag, and the cells are coded with the <td> tag. Both tags are placed between the <table></table> tags, and like the <table> tag, the <tr> and <td> have properties of their own, that control the look and feel of the content within the table.
There is another tag used inside the <table> tag, which is the <th>, or header tag. I don't see this one often used, or let's say, I don't ever use this one. Basically, the browsers will display the text in the <th> property as bold and centered.
- border: you can have a border around your table (border=1) which is a pixel size border.
- cellpadding: the width of space within cells of a table. (cellpadding=1)
- cellspacing: the width of the space between table cells. (cellspacingf=2)
- width: the width of the table itself. It could be in absolute size, which is in pixels (width="640")
or relative size, based on the users browser window opened. (width="100%")
- bgcolor: the color of the background within the table. (bgcolor=silver or bgcolor=e7e7e7)
There are other properties or elements that could be used, but these are the most basic and used.
Note: even if you don't use a border or cellpadding, place the property or element as: border=0 or cellpadding=0. If you don't you might see different results based on the browser. netscape could have a default of 1 pixel for the border, and microsoft could have 0 as the default.
<table border=0 cellpadding=0 cellspacing=2 width="800">
The <tr> property is for the row of the table. like the <table> element, the <tr> can also have it's own set of properties.
- bgcolor: you could override the bgcolor of the table property, with the bgcolor within the <tr>
- colspan: specifies the number of columns a cell should span across the cells, horizontally.
Example: <tr colspan=2>
this will span row across 2 columns.
The <td> property is for the cell within the table. think of excel.
- align: align the cell content, from left to right (align=center)
- valign: vertical align the cell content, from top to bottom (valign=top)
- bgcolor: you could override the bgcolor of the table property, with the bgcolor within the <td>
- rowspan: specifies the number of rows a cell should span vertically.
Example: <td rowspan=2>
this will span a cell 2 rows.
sample table layout
The sample below is a table that is 800 pixels wide, with 2 rows and 5 columns.
<table border=0 cellpadding=0 cellspacing=2 width=800> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td> <td>row 1 cell 4</td> <td>row 1 cell 5</td></tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td> <td>row 2 cell 4</td> <td>row 2 cell 5</td></tr> </table>
Learn how to build tables, and you will see how much more control and freedom you will have when building your web pages.
Check out my article on HTML iFrames: