How to add a table in html?

What is a table in html?

HTML table is a very powerful element that helps you to organize your data into row and column so that the user can read it nicely. It is commonly used tool that view your data in organize manner to the viewer in laminated form. In that laminated form you can show your data on your website in the form of manufactured goods schedule, client’s details, economic information, and etc.

Basic theory overview of creating a table in html

The table can be created in html in very easy way, in which you have to write the <table> code inside the body tag. And inside it you can customize it my making rows and columns, the rows can be made by writing the <tr> tag inside it, and by writing <td> inside the same element, column will be created.



Division of table tag

The table tag is mainly divided into three categories: –

  • <thead>
  • <tbody>
  • <tfoot>

 

<thead>

<thead> means table heading which helps you to create a heading for your website content, and in the table headers the headers will be properly visible to the viewers.

<tbody>

<tbody> means table body that helps you to keep all your valuable and precious content in it. In which the content of table body can be properly visible to the viewers.

<tfoot>

<tfoot> means table footer which helps you to keep you nice footer thought in it, and in the table footer the content looks pretty nicer.

Main purpose of the division of table tag

The main reason or main purpose of dividing the table tag into these three tag because, when the table content is divided into three parts your website and your codes will look like organized, and there will be no confusion between these three tags in your code.

Is table cannot be formed without (<thead>, <tbody>, <tfoot>) these tags?

It does not matter that you have to use these tags while making table for your website, some of the coders like to make table using these tags because the website and codes look like organized and all the confusion will be removed between these three tags in the codes. But some of the coders feel laziness and do not make table using these three codes and table which are made by them using shortcut way creates problem further because they will confuse between the three tags in their code.

Basic Table structure

Input of basic table structure:-

<!DOCTYPE html>

<html lang=”en”>

 

<head>

    <title>Basic table in html</title>

</head>

 

<body>

    <table>

 

        <tr>

            <th>Name</th>

            <th>Age</th>

            <th>email</th>

        </tr>

 

        <tr>

            <td>Peter</td>

            <td>36</td>

            <td>peter@gmail.com</td>

        </tr>

 

        <tr>

            <td>Clark</td>

            <td>40</td>

            <td>clark@gmail.com</td>

        </tr>

 

        <tr>

            <td>Harry</td>

            <td>55</td>

            <td>harry@gmail.com</td>

        </tr>

 

    </table>

</body>

</html>

Output of basic table structure:-

Html table sample

CustomizeTable structure

Input of customize table structure:-

<!DOCTYPE html>

<html lang=”en”>

 

<head> </head>

 

<body>

 

    <table>

    <thead>

 

      <tr>

        <th>Time</th>

        <th>Learnt</th>

      </tr>

 

    </thead>

 

    <tbody>

      <tr>

        <td>2010</td>

        <td>Simple Learner</td>

      </tr>

     </tbody>

 

      <tbody>

        <tr>

          <td>2020</td>

          <td>Advanced Learner</td>

        </tr>

      </tbody>

 

  </table>

</body>

</html>

Output of Customize table structure:-

Customize table structure

Some css property of table

In the css property mainly I will discuss about:-

  1. Padding
  2. Border
  3. border-collapse
  4. text-align.
  5. Cellspacing

Padding

The padding is the property of css that help us to generate space between the content present inside the table. It comes with four property that is – padding-top, padding-bottom, padding-left, padding-right.

Border

There will be no borders present in the table by default, the css property which is called border can be used to make border and the size of the border can be also fixed in this border property.

Examples with the css property of Padding and Border

Input of css property table structure:-

<!DOCTYPE html>

<html lang=”en”>

 

<head>

    <title>Examples with the css property of Padding and Border</title>

 

    <style>

        table, th, td {

            border: 1px solid black;

        }

        th, td {

            padding: 10px;

        }

    </style>

</head>

 

<body>

<h2>Examples with the css property of Padding and Border</h2>

<table>

        <tr>

            <th>Name</th>

            <th>Phone Number</th>

            <th>Age</th>

        </tr>

        <tr>

            <td>Peter</td>

            <td>9999999999</td>

            <td>33</td>

        </tr>

        <tr>

            <td>Clark</td>

            <td>8888888888</td>

            <td>42</td>

        </tr>

        <tr>

            <td>Harry</td>

            <td>6565656565</td>

            <td>55</td>

        </tr>

    </table>

</body>

</html>

Output of css property table structure:-

Padding Tag of Html

Border-collapse

Border collapse is nothing but it is used to separate the table with content and reduces the border line.

Text-align

Text align helps to align the content and it can be used in any tag of html, it comes in three form that is text-align center, text-align left and text-align right.

Examples with the css property of Examples with the css property of border-collapse and text-align

Input of css property table structure:-

<!DOCTYPE html>

<html lang=”en”>

 

<head>

    <title></title>

    <style>

        table {

            border-collapse: collapse;

        }

        table, th, td {

            border: 1px solid black;

        }

        th, td {

            padding: 10px;

        }

        th {

            text-align: left;

        }

    </style>

</head>

 

<body>

    <h2></h2>

    <table>

        <tr>

            <th>Name</th>

            <th>Age</th>

            <th>Gender</th>

        </tr>

        <tr>

            <td>Peter</td>

            <td>42</td>

            <td>Male</td>

        </tr>

        <tr>

            <td>Sangeeta</td>

            <td>26</td>

            <td>Female</td>

        </tr>

        <tr>

            <td>Harry</td>

            <td>32</td>

            <td>Male</td>

        </tr>

    </table>

</body>

</html>

Output of css property table structure:-

Border Collapse tag of Html

Cell Spacing

Its main work is to create the space between the tables in html table tag and its main supported attributes are Pixel and Percent.

Examples with the css property of border Cellspacing

Input of css property table structure:-

<!DOCTYPE html>

<html lang=”en”>

<head>

 

    <title>Example of cellspacing</title>

   

</head>

<body>

    <table cellspacing=”10″>

          <tr>

            <td>Ms Word </td>

            <td>🌟🌟🌟🌟🌟</td>

          </tr>

          <tr>

            <td>Excel</td>

            <td>🌟🌟🌟🌟</td>

          </tr>

          <tr>

            <td>Photography</td>

            <td>🌟🌟🌟</td>

          </tr>

        </table>

</body>

</html>

Output of css property table structure:-

Cellspacing Tag of Html

How to pass over multiple rows and columns in table?

To Passover multiple rows and columns or mix multiple rows and columns we need to tags which are rowspan and colspan. And it is very powerful tool to help you to organize your data in a good manner,

Rowspan

Rowspan is used to combine two or more rows into 1 row according to the instruction, it is not necessary that you have to combine only two rows you can combine more than 2 rows.

Example of Rowspan

Input of the example of rowspan:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Span Multiple Rows in an HTML Table</title>

    <style>

        table {

            width: 300px;

            border-collapse: collapse;

        }

        table, th, td {

            border: 1px solid black;

        }

        th, td {

            padding: 10px;

        }

    </style>

</head>

<body>

    <h2>Spanning Rows</h2>

    <table>

        <tr>

            <th>Name:</th>

            <td>Aditya Raj</td>

        </tr>

        <tr>

            <th rowspan=”2″>Pin Code:</th>

            <td>805110</td>

        </tr>

        <tr>

            <td>805123</td>

        </tr>

    </table>

</body>

</html>

Output of the example of rowspan:-

Rowspan Tag of Html

Colspan

Colspan is used to combine two or more columns into 1 column according to the instruction, it is not necessary that you have to combine only two columns you can combine more than 2 columns.

Example of Colspan

Input of the example of colspan:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Span Multiple Columns in an HTML Table</title>

    <style>

        table {

            width: 300px;

            border-collapse: collapse;

        }

        table, th, td {

            border: 1px solid black;

        }

        th, td {

            padding: 10px;

        }

    </style>

</head>

<body>

    <h2>Spanning Columns</h2>

    <table>

        <tr>

            <th>Name</th>

            <th colspan=”2″>Pin Code:</th>

        </tr>

        <tr>

            <td>Williamsion</td>

            <td>805110</td>

            <td>805123</td>

        </tr>

    </table>

</body>

</html>

Output of the example of colspan:-

Colspan Tag of html

Table Captions

The title of the table can be added using caption tag in html table; the caption tag should be used just after the table code. It has very nice css property which helps you to write your caption below the table.

Example of table caption

Input of the example of Caption:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Adding a Caption to the HTML Table</title>

    <style>

        table {

            width: 300px;

            border-collapse: collapse;

        }

        table, th, td {

            border: 1px solid black;

        }

        th, td {

            padding: 10px;

        }

        table.secondary caption {

            caption-side: bottom;

        }

    </style>

</head>

<body>

    <h2>Table with Caption at the Top</h2>

    <table>

        <caption>Users Info</caption>

        <tr>

            <th>Name</th>

            <th>Mob No</th>

            <th>Age</th>

        </tr>

        <tr>

            <td>Peter</td>

            <td>9999999999</td>

            <td>66</td>

        </tr>

        <tr>

            <td>Clark</td>

            <td>8888888888</td>

            <td>34</td>

        </tr>

    </table>

 

    <h2>Table with Caption at the Bottom</h2>

    <table class=”secondary”>

        <caption>Users Info</caption>

        <tr>

            <th>Name</th>

            <th>Mob No</th>

            <th>Age</th>

        </tr>

        <tr>

            <td>Peter</td>

            <td>9999999999</td>

            <td>66</td>

        </tr>

        <tr>

            <td>Clark</td>

            <td>8888888888</td>

            <td>34</td>

        </tr>

    </table>

</body>

</html>

Output of the example of Caption:-

Caption tag of html

Leave a Reply