In this tutorial we will see how to create tables in a web page. Table is created using <table> tag. <tr> is used to create table row, <td> is used to insert data(one cell is created when you use <td>),<th> to create table heading and table’s heading is added using <caption> tag.
Example <table>
<caption>Tables's caption</caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
Output
Heading 1Heading 2Heading 3
cell 1cell 2cell 3
cell 4cell 5cell 6
cell 7cell 8cell 9
Note: Always use <tr> tag inside <table> tag and <td> and <th> tags inside <tr> Borders The above table didn’t had border in it. To create border you have to use border attribute in <table>. Numbers are values of border attribute. Greater the number thicker is the border. Example
<table border="3">
<caption>Tables's caption</caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
Output
Heading 1Heading 2Heading 3
cell 1cell 2cell 3
cell 4cell 5cell 6
cell 7cell 8cell 9
Cell padding You increase space between cell’s contents and cell’s border using cellpadding attribute. It is the attribute of <table> tag. Example <table border="3" cellpadding="8">
<caption>Tables's caption</caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
Output
Heading 1Heading 2Heading 3
cell 1cell 2cell 3
cell 4cell 5cell 6
cell 7cell 8cell 9
Cell spacing You increase space between cells using cellspacing attribute of <table> tag.
Example
<table border="3" cellspacing="8">
<caption>Tables's caption</caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td>cell 5</td><td>cell 6</td></tr>
<tr><td>cell 7</td><td>cell 8</td><td>cell 9</td></tr>
</table>
Output
Heading 1Heading 2Heading 3
cell 1cell 2cell 3
cell 4cell 5cell 6
cell 7cell 8cell 9
Spanning Cell can occupy two or more rows or columns. If you want cell to occupy more than 1 row use rowspan.For more than 1 column use colspan. Use rowspan or colspan in <td> or <th> Example
<table border="3">
<caption>Tables's caption</caption>
<tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
<tr><td rowspan="2">cell 1(rowspan)</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 4</td><td colspan="2">cell 5</td></tr>
<tr><td colspan="3">cell 6(colspan)</td></tr>
</table>
Output
Heading 1Heading 2Heading 3
cell 1(rowspan)cell 2cell 3
cell 4cell 5
cell 6(colspan)