HTML Tables

This tag comes in handy when we have to represent the data in tabular format i.e. rows and columns.

It is recommended to use <div>tag (division) over table to maintain the layout of the web page. Layout of the page consist of header, footer, navigation, body etc.

Table Tags:

TAGS DESCRIPTION
<table> Defines the table.
<tr> It define Row in a table (table row).
<th> It define Heading in a table (table heading).
<td> It define data in a table (table data).
<caption> It define table caption.
<colgroup> Ina table formatting it specifies the group of one or more columns.
<col> It specifies column properties.
<tbody> It groups the body of content in a table.
<thead> It describe table heading.
<tfooter> Footer content of the table.

Example:

Try Now

Output:

House of Stark

First_Name Last_Name
Jon Snow
Ned Stark
Arya Stark
Rob Stark

Table Spanning

Spanning describes the combining or joining of table row or column.

  1. Row Span: Syntax <throwspan=”No. of rows”>Text</th>
  2. Column Span: Syntax <thcolspan=”No. of columns”>Text</th>

Example:

Col span:

CSS code:

Html code:

Try Now

Row Span:

CSS code:

ode:

Try Now

CELL PADDING

In Html Cell padding attributes specifies spacing between cell wall and cell content. Its value is given in pixel.

Cell Padding can be implemented by two methods:

  1. Through HTML
  2. Through CSS

But it is recommended to implement through CSS let’s see how:

CSS:









Html code:

Try Now