Design a table using table tag and its attributes

HTML Web Development Front End Technology

The task we are going to perform in this article is to design a table using <table> tag and its attributes. For creating the structure of the table we use the <table> and later we use attributes to design the table.

Let's dive into the article for getting more idea on creating a table using the <table> tag and its attributes. We use the <table> tag to build a table, and its characteristics will be used to design the table. Cellspacing, cellpadding, border, background color, and other attributes will be used to design the table.

HTML <table> tag

We occasionally need to display our data in tabular format on our website or in a web application. For this, we have a Table tag in HTML that is defined by the <table> tag and includes various other tags like <tr>, <td>, <th>, and <caption> that are necessary to complete data in the table on our webpage.

Tables are frequently used in data analysis to compare two or more data sets and to convey text information together with the corresponding numerical data.

Syntax

Following is the syntax for HTML <table> tag.

<table>…</table>

Now, let's look into the following example, for getting more idea on creating a table using the table tag and its attributes.

Example

Following is the example where we are going to construct the table using the <table> tag along with the border attribute.

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
   <table border="2">
      <tr>
         <th>Name</th>
         <th>Ipl_Team</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>Dhoni</td>
         <td>CSK</td>
         <td>India</td>
      </tr>
      <tr>
         <td>Butler</td>
         <td>RR</td>
         <td>England</td>
      </tr>
      <tr>
         <td>Williamson</td>
         <td>GT</td>
         <td>NewZealand</td>
      </tr>
      <tr>
         <td>Pooran</td>
         <td>LSG</td>
         <td>West-Indies</td>
      </tr>
   </table>
</body>
</html>

On running the above code, the output window will pop up, displaying the table along with the data filled in the table and applied with borders on the webpage.

Example

Consider the following, where we are going to use the colspan for making the cell to span more than one column.

<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 3px solid #D2B4DE;
         border-collapse: collapse;
      }
      th,
      td {
         padding: 3px;
         text-align: left;
      }
   </style>
</head>
<body>
   <table style="width:100%">
      <tr>
         <th>Employee</th>
         <th colspan="2">Address</th>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>Current:Hyderabad</td>
         <td>Permanent:Delhi</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Current:Vizag</td>
         <td>Permanent:Hyderabad</td>
      </tr>
      <tr>
         <td>Raj</td>
         <td>Current:Nellore</td>
         <td>Permanent:Vijayawada</td>
      </tr>
   </table>
</body>
</html>

When the above program gets executed, it will generate an output consisting of a table used with colspan applied with CSS that is displayed on the webpage.

Example

Let's look at the following example, where we are going to use the caption in our table.

<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 2px solid #DFFF00;
         border-collapse: collapse;
      }
      th,
      td {
         padding: 11px;
      }
   </style>
</head>
<body>
   <table>
      <caption>Employee Details</caption>
      <tr>
         <th>Name</th>
         <th>Department</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>Kamal</td>
         <td>IT</td>
         <td>24</td>
      </tr>
      <tr>
         <td>Raj</td>
         <td>BPO</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>DEVELOPMENT</td>
         <td>26</td>
      </tr>
      <tr>
         <td>Sana</td>
         <td>ASSOCIATE</td>
         <td>27</td>
      </tr>
   </table>
</body>
</html>

On running the above program, it will display an output consisting of a table created on the webpage along with an applied CSS and caption to be displayed on the webpage.

Example

In the following example, we are going to add the background color to the table that we are going to create.

<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 2px solid #7D3C98;
      }
   </style>
</head>
<body>
   <table style="background-color:#ABEBC6 ">
      <tr>
         <th>Name</th>
         <th>Country</th>
         <th>Hobby</th>
      </tr>
      <tr>
         <td>Mani</td>
         <td>India</td>
         <td>Playing Cricket</td>
      </tr>
      <tr>
         <td>Mamboo</td>
         <td>Nigeria</td>
         <td>Listening Music</td>
      </tr>
      <tr>
         <td>Black-Widow</td>
         <td>Marvel</td>
         <td>Avengers Wars</td>
      </tr>
   </table>
</body>
</html>

When the above code gets executed, it will generate an output consisting of the table with the applied CSS displayed on the webpage.

Yaswanth Varma

Updated on: 08-Sep-2023

83 Views

Kickstart Your Career

Get certified by completing the course

Get Started