How to create table in HTML

HTML Table

The HTML table tag is used to represent data in a tabular form (row * column). There can be a number of rows and columns. The HTML tables can arrange any type of data such as text, images, links. 

The HTML tables are created by using <table> tag which is the main tag in HTML. Here, the <tr> tag is used to create rows in a table. The <td> tag is used to create data in a cell of the table and the <th> tag is used to create heading in the table. In simple words, <th> tag make your text little emphasised as compared to the rest of text. 

HTML Table Tags

Tag

Description

<table>Defines a table.
<tr>Defines a row.
<th>Defines a header cell.
<td>Defines a cell.
<caption>Defines the table caption.
<colgroup>Specifies a group of one or more columns in a table for formatting.
<col><colgroup> element to specify column properties for each column.
<tbody>Group the body content.
<thead>Group the header content.
<tfoot>Group the footer content.

HTML Table Example

Html Table

Output of above written code is –

Html Table

As the above mentioned table shows the data in the tabular form, however, this does not have any borders. Borders help make data more readable, organised and easy to understand. Now, let’s understand how to create a table with desired borders.

HTML Table with Border

There are two ways to specify border:- 

  1. By border attribute in HTML
  2. By border property in CSS

Let’s understand both methods one by one with example.

1) HTML Border Attribute

In the table, you can use the border attribute to specify border.

html table with border

Output –

html table with border

2) CSS Border Property

Here, the second way, use the border property of CSS to specify the border in the table.

html table with border

HTML Table with Cellpadding

You can specify padding for the table header and table data by two ways:

  1. By cell padding attribute of the table in HTML
  2. By padding property in CSS

The cell padding attribute of HTML table tag is obsolete now. It is recommended to use CSS. So let’s see the code of CSS.

cellspacing in HTML Table

Output –

cellpadding in html table

HTML Table with Cellspacing

cellpadding in HTML Table

Output –

Cellspacing in HTML Table

HTML Table with colspan

Colspan in HTML Table

Output –

Colspan in HTML Table

 

HTML Table with Rowspan

You can use the rowspan attribute when you want to make a cell span more than one row then the rowspan attribute will help you.

rowspan in HTML Table

Output –

rowspan in HTML Table

HTML table with caption

HTML caption is displayed above the table. It must be used after table tag only.

caption tag in html table

Output –

caption tag in html table

Hope this blog post will help understanding the concept of tables in HTML better. Let us know if you have any suggestions for the published content on the site. Feel free to contact us if you wish to register yourself in our skill upgradation courses.

For more such content subscribe to our YouTube channel – https://www.youtube.com/channel/UCcWR1IezEQynJnAETgK8g2w?sub_confirmation=1 and follow us on facebook – https://www.facebook.com/pristinetechschool

2 thoughts on “How to create table in HTML

  1. I have been exploring for a little for any high-quality articles or blog posts in this kind of space . Exploring in Yahoo I at last stumbled upon this website. Studying this information So i’m satisfied to exhibit that I’ve an incredibly excellent uncanny feeling I came upon exactly what I needed. I most unquestionably will make certain to don?t omit this web site and give it a look regularly.

Leave a Reply

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