How to create Html Tables?

How to create Table?

  1. The opening tag <table>– indicate beginning of the table
    the closing tag </table> -indicate ending of the table.
  2. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).<tr>– start a new row
    </tr> – ending of the row
  3. td stands for “table data,” and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.<td> – table content starts.
    </td>– table content table ends.

Example:

<table border=”1″>
<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>

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

How to display the heading of table?

using <th> tag to specify the header information of the table.

Example:

<table border=”1″>

<tr>
<th></th>
<th>Column1</th>
<th>column 2</th> </tr>
<tr>

<td><strong>row1</strong></td>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td><strong>row2</strong></td>
<td>Cell 3</td>
<td>Cell 4</td>

</tr>
</table>

Column1 column 2
row1 Cell 1 Cell 2
row2 Cell 3 Cell 4

rowspan Attribute

How to create more white space between the cell content and its borders?

using cellpadding we give space between the cell content and its border.

Example

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

How to increase the distance between the cells?

using cellspacing we give the distance between the cells

Without cellspacing:

First Row
Second Row

With cellspacing:

First Row
Second Row

source:w3schools

Posted in Html