HTML Tables

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