HTML Tables
- The HTML tables allow arranging data like text, images, links. its consists of rows and columns.
- The HTML tables are created using the <table> tag
- table row <tr> tag is used to create table rows and <td> tag is used to create data cells.
- table heading can be defined using <th> tag. This tag will be put to replace <td> tag. which is used to represent actual data cells.
<table border="1"> <tr> <th> Sl No. </th> <th> Student Name </th> <th> Status </th> </tr> <tr> <td> 1 </td> <td> Mahesh </td> <td> Pass </td> </tr> </table>
cellpadding represents the distance between the cell border and the content within the cell. The cellspacing attribute defines the width of the border.
<table border="1" cellspacing="5" cellpadding="10"> <tr> <th> Sl No. </th> <th> Student Name </th> <th> Status </th> </tr> <tr> <td> 1 </td> <td> Mahesh </td> <td> Pass </td> </tr> </table>
You will use colspan and rowspan attributes if you want to merge two or more columns or rows.
<table border="1"> <tr> <th> Sl No. </th> <th> Student Name </th> <th> Status </th> </tr> <tr> <td> 1 </td> <td> Mahesh </td> <td rowspan="2"> Pass </td> </tr> <tr> <td> 2 </td> <td> Ram </td> </tr> </table>
- we can change border color using bordercolor attribute
- we can add background color by using bgcolor attribute
<table border="1" bordercolor="red" bgcolor="green"> ... </table>
and also we can apply background image instead of background color.
<table border="1" bordercolor="red" background="picture.jpg"> ... </table>
we can apply background color for tr and td
<table cellspacing="5" cellpadding="5"> <tr> <td bgcolor="red"> Name </td> <td bgcolor="red"> Status </td> </tr> </table>
<caption> Student Results </caption>
<table cellspacing="5" cellpadding="5"> <caption> Student Results </caption> <tr> <td bgcolor="red"> Name </td> <td bgcolor="red"> Status </td> </tr> </table>
Follow the below table structure and
email templates are designed by html tables