HTML Table

This HTML table tutorial demonstrates how to create tables in HTML, style them with CSS, add alternating background colors, and more.

An HTML table is defined with the tag.Each table row is defined with the tag. A table header is defined with the tag. By default, table headings are bold and centered. A table data/cell is defined with the tag.Using table we arrange data in the form of row and column. To create a table in html use tag.

Basic Table Elements

The basic structure of an HTML table consists of the following tags:

Table tags: <TABLE> </TABLE>
Row tags: <TR> </TR>
Cell tags: <TD> </TD>


Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>. Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.

Use of table in Html

HTML tables should only be used for rendering data that belongs naturally in a grid, in other words where the data describe a number of objects that have the same properties. This data may be enterable by the user in a form, as long as each column and row contains similar content.

 TagDescription
1 It define table
2 It define a table row in table
3 It define table data in table row 
4 It defined table heading in table row
5 It defined table caption
6 It defined It specifies a group of one or more columns in a table for formatting.
7 

It is used with

element to specify column properties for each column.

8 It is used to group the body content in a table
9 It is used to group the header content in a table
10 It is used to group the footer content in a table

Example (Table with Border)

Lets apply border to this table

<table border=”1px”>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Jhon</td>
<td>87</td>
</tr>
<tr>
<td>Peter</td>
<td>89</td>
</tr>
<tr>
<td>Parker</td>
<td>92</td>
</tr>
</tr>
<tr>
<td>Robert</td>
<td>97</td>
</tr>
</table>

table-with-border-in-html

OUTPUT

display-table-with-border-in-html

Example (Table without Border)

<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Jhon</td>
<td>87</td>
</tr>
<tr>
<td>Peter</td>
<td>89</td>
</tr>
<tr>
<td>Parker</td>
<td>92</td>
</tr>
</tr>
<tr>
<td>Robert</td>
<td>97</td>
</tr>

</table>

tables-in-html

OUTPUT

display-tables-in-html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu