Basic html tables are created by using <table>, <tr> (Table Row) and
<td> (Table Cell) tags. It may seem to be a little difficult at the beginning,
but as you complete this part of tutorial on html, it will be all simple. HTML tables
are used for 'Web Page Layout' by many web designers.
<tr> and <td> tags are placed inside <table> tag. Let's quickly
make a simple html table.
Output:
|
Row 1 Col 1
|
Row 1 Col 2
|
|
Row 2 Col 1
|
Row 2 Col 2
|
As you can see, there are two rows in the table, each containing two cells. Contents
are placed in cells (<td> tags). We have used border attribute to define
the thickness of the table border. If you don't want a border, specify it as zero.
We will now look at some other common attributes like 'cellspacing', 'cellpadding'
and 'width' of html tables.
Cell Spacing, Cell Padding & Width
With cellpadding, cellspacing and width attributes, we can adjust the space in and
arround the html tables. Cell-spacing is the distance between cells and cell-padding
is distance between cell borders and the content within it. Width of the html table
can be specified either in pixels or percentages. While specifying the width in
pixels ensures exact width, percentage allows the table to resize itself depending
on the web content and page width. Additionally, you may also define the width of
cells. Let's test with three examples below:
Example 1
Output:
|
Row 1 Col 1
|
Row 1 Col 2
|
|
Row 2 Col 1
|
Row 2 Col 2
|
Example 2
Output:
|
Row 1 Col 1
|
Row 1 Col 2
|
|
Row 2 Col 1
|
Row 2 Col 2
|
Example 3
Output:
|
Row 1 Col 1
|
Row 1 Col 2
|
|
Row 2 Col 1
|
Row 2 Col 2
|
HTML Table Headers
Table headers are defined with <th> & </th> tag. You can place these
tags inside <tr> tags, just like <td> tags. Most browsers display the
headers bold and centered.
Output:
|
Column 1
|
Column 2
|
|
Row 1 Col 1
|
Row 1 Col 2
|
|
Row 2 Col 1
|
Row 2 Col 2
|
Colspan & Rowsapn Tags
You can use the html table colspan attribute to make a cell span multiple columns.
Similarly use rowspan attribute to make a row span multiple rows. The value is defined
in numbers (e.g - colspan = 2 means two columns to span).
These attributes are frequently used by web designers for web page layout. We will
learn this in details in upcoming chapters.
Output:
|
Heading 1
|
Heading 2
|
Heading 3
|
|
Row 1 Cell 1
|
Row 1 Cell 2
|
Row 1 Cell 3
|
|
Row 2 Cell 2
|
Row 2 Cell 3
|
|
Row 3 Cell 1
|
- As we have already discussed, html tables are widely used for creating web page
layouts. If you are planning to do a simple layout, tt's important to have good
knowledge of html tables.
- You can place any content inside cells: images, texts, paragraphs or even another
table.