How to Use Table in HTML ?

Chapter 5 : How to Use Table in HTML ?
Chapter 5 : How to Use Table in HTML ?

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td>
 </tr> 
</table>

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

<table border="1">
 <tr> 
<td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr>
 </table>

and….

<table border="5"> 
<tr> 
<td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr> 
</table>

Open up your text editor or Notepad. Type in your <html>, <head> and <body> tags. From here on I will only be writing what goes between the <body> tags. Type in the following:

<table border="1">
<tr>
<td>Tables can be used to layout information</td>
<td>
<img src="http://www.simplycode.in/wp-content/themes/simplycode/images/logo.png"> </td>
</tr>
</table>

Save your page as index.html and view it in your browser.

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1"> 
<tr>
<th>Heading</th> 
<th>Another Heading</th>
 </tr> 
<tr> 
<td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr>
</table>

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together.

<table border="1"> 
<tr> 
<td>some text</td> 
<td>some text</td>
 </tr>
 <tr> 
<td>some text</td>
 <td>some text</td> 
</tr>
 </table>

Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible.

<table border="1" cellspacing="5">
 <tr>
<td>some text</td>
 <td>some text</td>
 </tr>
<tr> 
<td>some text</td>
 <td>some text</td> 
</tr> 
</table>

Cellpadding is the pixel space between the cell contents and the cell border. The default for this property is also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border property turned on. Cellpadding can be handled in a style sheet.

<table border="1" cellpadding="10">
 <tr> 
<td>some text</td>
 <td>some text</td>
 </tr>
<tr> 
<td>some text</td> 
<td>some text</td>
 </tr> 
</table>

Table Tags

TagDescription
<table>Defines a table
<th>Defines a table header
<tr>Defines a table row
<td>Defines a table cell
<caption>Defines a table caption
<colgroup>Defines groups of table columns
<col>Defines the attribute values for one or more columns in a table

Table Size

The width attribute can be used to define the width of your table. It can be defined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels. For example, this code, <table width=”550″>, will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor’s viewing window. Hence this code, <table width=”80%”>, will produce a table that occupies 80 percent of the screen.