HTML TUTORIAL
HTML Tables
The HTML Tables are created with <table> tag. The tables are formed of rows and each row will have one or usually more that one data. The row of a table is defined with <tr> tag. The tr stands for table row. Within a row, there are data cells that are defined with <td> tag. The letter td stands for table data. Take a look at the following table example.
<table border="1"> <tr> <td>Sl No </td> <td>Name </td> </tr> <tr> <td>1</td> <td>Allan</td> </tr> <td>2</td> <td>Nancy</td> </tr> </table> |
If you open it in the browser, it will look like this
Sl No | Name |
1 | Allan |
2 | Nancy |
The Border Attribute
In the above example the table had a border attribute. If you omit the border attribute, the border will not be printed.
<table > <tr> <td>Data1 </td> <td>Data2 </td> </tr> <tr> <td>Data3</td> <td>Data4</td> </tr> </table> |
The above example will give output as follows
Data1 | Data2 |
Data3 | Data4 |
Table Heading
The Table headings are defined with <th> tags. The th stands for table heading. Take a look at the following example
<table border = "1" > <tr> <th>Sl No </th> <th>Name </th> </tr> <tr> <td>1 </td> <td>Allan </td> </tr> <tr> <td>2</td> <td>Nancy</td> </tr> </table> |
The above example will give output as follows
Sl No | Name |
---|---|
1 | Allan |
2 | Nancy |
Practice Examples
You will like to practice more about links here.Example - Table
Example - Table Without Border
Example -Table Heading
Example -Table with a bakground color
Example -Table with a Cell color
Example -Table with a bakground image
Example -Table with a backgrounf Cell image
Example -How to span cells in two columns
Example -How to span cells in two rows
Example -How to increase cell spacing
Example -How to increase cell span - cell padding