HTML Tables

HTML Tables


It heps us to arrange data in rows and columns.It allow us to arrange any kind of data in rows and columns by using <table> tag to create table and inside this <tr> to create table rows and <td> to create columns or data cells.


Syntax for using table:


<table>
<tr>
<td></td><td></td>
</tr>
</table>

Example of Tables

<html>
<body>
<table border="1">
<tr>
<td>Row1 Column1</td><td>Row1 Column2</td>
</tr>
<tr>
<td>Row2 Column1</td><td>Row2 Column2</td>
</tr>
</table>
</body>
</html>

Result of above example

Row1 Column1Row1 Column2
Row2 Column1Row2 Column2

border="1"is used because just to add border across each cell you can make big borders by increasing the border value or you can hide the border by not writing in table tag.


Table Heading

It is used to put heading in table to determine the what kind of columns is

<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Rohit</td><td>BTech</td>
</tr>
<tr>
<td>Shivam</td><td>BCA</td>
</tr>
</table>
</body>
</html>

Result of above example

NameCourse
RohitBTech
ShivamBCA

Cellspacing and Cellpadding

Cellspacing attribute defines the width of the border and cellpadding represents the distance between cell borders and the content within a cell.


Example of Cellspacing and Cellpadding

<html>
<body>
<table border="1" cellspacing="10" cellpadding="5">
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Rohit</td><td>BTech</td>
</tr>
<tr>
<td>Shivam</td><td>BCA</td>
</tr>
</table>
</body>
</html>

Result of above example

NameCourse
RohitBTech
ShivamBCA

Rowspan,Colspan,bordercolor and bgcolor

rowspan is used to merge two or more rows,colspan is used to merge two or more columns into a single column and bgcolor is used to give background color to table.


Example of rowspan and colspan

<html>
<body>
<table border="1" bgcolor="red" bordercolor="blue">
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td colspan="2">Rohit</td><td>BTech</td>
</tr>
<tr>
<td rowspan="2">Shivam</td><td>BCA</td>
</tr>
<tr>
<td>Rishabh</td><td>BBA</td>
</tr>
</table>
</body>
</html>

Result of above example

NameCourse
RohitBTech
ShivamBCA
RishabhBBA

Table Caption

It is used as a title of a table it is displayed at the top of the table.


Example of Table Caption

<html>
<body>
<table border="1">
<caption>This is the title of the table</caption>
<tr>
<td>Rohit</td><td>BTech</td>
</tr>
<tr>
<td>Shivam</td><td>BCA</td>
</tr>
</table>
</body>
</html>

Result of above example

This is the title of the table
RohitBTech
ShivamBCA

Table header,Table body,Table footer

head and foot is header and footer of the page and the body is the main content holder of the table.


  • <thead>:It is used to create the header of the table.
  • <tbody>:It is used to create the body of the table.
  • <tfoot>:It is used to create the footer of the table.

  • Example of rowspan and colspan

    <html>
    <body>
    <table border="1">
    <thead>
    <tr>
    <td>Table header</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Rohit</td><td>BTech</td>
    </tr>
    <tr>
    <td>Shivam</td><td>BCA</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>Table footer</td>
    </tr>
    </tfoot>
    </table>
    </body>
    </html>
    

    Result of above example

    Table header
    RohitBTech
    ShivamBCA
    Table footer

    PreviousNext

    Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email