HTML Tables

HTML Table is very important for developing or designing sites.Through html tables we can create the two column ,three column or one column layout and there are many other uses of html tables.In html tables we discuss about table<table>,table row<tr> and table column<td> tags and there functions.Here is an example of html tables

HTML Tables

Cooking Oil	24%
Baking Powder	13%
Milk	33%
Other	20%

Example:(html table Code)

<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>

Your Result:

HTML Tables and Border Attributes
Here one thing is very important if we don't specify the border attribute ,the table will be displayed without border .Sometime time we create table without the border attribute but mostly we create the table with border attribute.
If you want to display the table with border attribute please specify the border attribute.here is the example

Example:

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

HTML Table Headers
HTML table headers is define with the <th> tag.All major browsers display the html table headers result in bold and cantered position.here is an example
Example:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

Your Result:

Tables Without Borders
Here i show you how to create tables without border.

Example:

<h4>This is a table with no borders:</h4>
<table>
<tr>
  <td>500</td>
  <td>600</td>
  <td>700</td>
</tr>
<tr>
  <td>800</td>
  <td>900</td>
  <td>1000</td>
</tr>
</table>

<h4>This is a table with no borders:</h4>
<table border="0">
<tr>
  <td>200</td>
  <td>300</td>
  <td>400</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

Your Result:

Table Headers(vertical and horizontal)
Here i show you how to create html headers both vertical and horizontal,now see


Example:

<h4>HTML table headers:</h4>
<table border="1">
<tr>
  <th>Your Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Mark Zuker</td>
  <td>235 77 854</td>
  <td>545 67 885</td>
</tr>
</table>

<h4>HTML Vertical headers:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Mark Zuker</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>235 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>545 67 885</td>
</tr>
</table>

Your Result:

How to Span more than one row or column
Here i show you how to span more than one row or column,now see you

Example:

<h4>How to span two column:</h4>
<table border="1">
<tr>
  <th>Your Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Mark Zuker</th>
  <th>323 66 435</th>
  <th>323 66 455</th>
</tr>
</table>
<h4>How to span two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Mark Zuker</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
  <td>235 77 854</td>
</tr>
<tr>
  <td>545 67 885</td>
</tr>
</table>

Your Result:

Cell Padding
Here i show you how to create spaces between cell text or content and its border,now see

Example:

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

Your Result:

Cell Spacing
Here i show you how to increase spaces between the cells ,now see

Example:

</table>

<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing="10"</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

Your Result:

that's all if you have any problem please happily Contact Us.