Sunday, October 10, 2010

HTML Tables

The tables are very useful for organizing and HTML are used very often, almost all web developers. Tables are like spreadsheets, and are composed of rows and columns.

Will create a table in HTML / XHTML using <table> tags. Inside <table> array element is written row by row. A row is contained in a <tr> tags. which means that the row of the table. And each cell is written in row with <td> tags. representing the data tables.


Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

HTML Tables and the Border Attribute
If you do not specify an attribute of the border, the table will be displayed without borders. Sometimes it can be useful, but mostly, we want the border to display the attribute. To view a table with borders, set the attribute:
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Table Cellpadding and Cellspacing:
There are two known attribiutes cellpadding and cellspacing to be used to adjust the white space in table cell. Cellspacing sets the width of the border, while cellpadding is the distance between cell borders and content. Here is an example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

This will produce following result:
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

No comments:

Post a Comment