How to Use HTML Tables

Use HTML Tables

HTML Tables

We can create table in web pages using html <table> tag. Tables are also act as a container like <div> or <list> in html.

A table consists of two part rows and columns. But in HTML we deal only with rows and columns have no specific values.

The table in HTML contains four possible tags.

<table> the main tag and all the other table information is inside it like rows etc.

<tr> one table contain many rows and every row is defined using this tag.

<td> td stands for table data actually they are cells which are inside some row and the define columns .

<th> in real they are also cells but define as table heading so these cells contain bold format content.

So the basic syntax of a table is:

It’s not necessary to must write <td> and <th> both in every table they are written according to our requirements but <tr> and <table> tags are must.

Output:

First Name Last Name Mobile No
David Beckham +44-123456789
David Beckham +44-123456789
David Beckham +44-123456789

Table attributes:

Like other HTML tags <table> tags have also some its specific attributes which are following:

Border=”1″ the first one is border attribute which shows a border around every cell and row and table also.

HTML table with border
HTML table with border

Width=”100%” the width attribute set the width of the table.

<table border=”2″ width=”100 %;”>

Height=”50%” the height attribute define the height of the table.

Cellspacing=”10px” this attribute define the distance /space between one cell to another.

Cellpadding=”10px” this attribute define the distance of content /data in a cell from its border.

Note: the cellspacing and cellpadding attributes are same as margin and padding in CSS.

<table border=”5″ width=”100%;” cellpadding=”10px” cellspacing=”10px”>

cell padding and cell spacing HTML table
cell padding and cell spacing HTML table

<Caption>

The caption tag is on the start of table tag after table tag in front of first row and it show the caption above on the table.

 

caption HTML table
caption HTML table

Colspan and rowSpan:

These two attributes are defined <th> or <td> tags. They are designed to merge two rows or columns like if we want a cell to extend the space equal to two cell then we define this attribute in that cell.

Output

Name Mobile No
david Jhonson Raza +44-123456789

As in above example, we put colspan on Name cell and it expends on the space of two cells and the other cell instead of this act as they are.

Same if we use rowspan it expand on two rows.

It’s when we define rowspan in name <th>.

Table Output
Table Output

View Live Demo HTML

Leave a Reply

Your email address will not be published. Required fields are marked *