Tables in HTML

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

The table element <table> is used to represent our data tabularly on the websites. We can display our data in a two-dimensional form on the web pages. Tables permit the peruser to get results or decisions initially, instead of poring over text to track down the numeric information or central issues. Making a post or page more understandable in this manner can help draw in and keep guests on your site and, at last, further develop their client experience.HTML tables are utilized for showing information that bode well in accounting page programming. They comprise rows and columns and are frequently used on sites for the successful showing of even information.

 

Instead of displaying content as just paragraphs, Let's use an example of how the HTML tables allow us to display the data efficiently.

All the data to be displayed in a spreadsheet on the web pages could be done using the HTML <table> tag. 

Let’s see the different kinds of tags and attributes that are available in HTML for styling the table element.

 

 

Tags and Attributes

The basic tags used along <table> in HTML to define a table are <tr>, <td>, and <th>. 

  • The <table> tag is used to define a table in HTML.
  • The <tr> tag is used to define a new row in the table.
  • The <td> tag is used to define the table data, i.e., the table cells for each row.
  • The <th> tag is used to define the header of the Table in HTML. 

 

An HTML table using these basic tags can be given as : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Institute</th>
            <th>Email address</th>
        </tr>
        <tr>
            <td>Ninja A</td>
            <td>Coding Ninjas Java</td>
            <td>ninja@coding.com</td>
        </tr>
        <tr>
            <td>Ninja B</td>
            <td>Coding Ninjas c++</td>
            <td>ninjab@coding.com</td>
        </tr>
        <tr>
            <td>Ninja C</td>
            <td>Coding Ninjas Python</td>
            <td>ninjac@coding.com</td>
         </tr>
     </table>
</body>
</html>

OUTPUT

In the above example, if the HTML tables are not styled, they are displayed on the screen without the border. Tables do not have a border by default, we can add these using CSS styling.

Let's discuss a few available elements and attributes in HTML used for creating and editing the style of the table.

<thead> : The <thead> element is used to define the head element in the Table. 

→ <rowspan>: The <rowspan> attribute for the table header is used to declare how many rows that particular cell should span. By default, the value of <rowspan> is set as 1 and can take any positive integer value up to 65534.

<colspan>: The <colspan> attribute is similar to <rowspan> attribute which is used along a <thead> (table head) or a <tdata> (table data), that indicates the count of the columns that particular cell should span. 

→ <tbody>: The <tbody> element is used to define the body content inside the table in separate rows. The contents in the <tbody> element display a separate semantic block inside the table. 

→ <tfoot>: The <tfoot> (table footer) element uses table rows to give a footer content or to summarize content at the end of the table. 

 

Let’s see an example of an HTML table for each of the tags and attributes discussed so far, that would help you as a developer to understand the usage of each element. 

Example for <colspan> and <rowspan> :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>NinjaDocument</title>
</head>
<body>
    <h2>Example of Table Rowspan</h2>
    <table border="1" cellpadding="10">
        <tr>
            <th rowspan="4">Users Info</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ninja A</td>
            <td>ninjaA@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ninja B</td>
            <td>ninjaB@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Ninja C</td>
            <td>ninjaC@mail.com</td>
        </tr>
    </table>
    <h2>Example of Table Colspan</h2>
    <table border="1" cellpadding="10">
        <tr>
            <th colspan="3">Users Info</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ninja A</td>
            <td>ninjaA@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ninja B</td>
            <td>ninjaB@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Ninja C</td>
            <td>ninjaC@mail.com</td>
        </tr>
    </table>
</body>
</html>


OUTPUT

Example for <thead>, <tbody>, and <tfoot> :

<!DOCTYPE html>
<html>
  <head>
    <title>Ninja Document</title>
  </head>
  <body>
    <table summary="Ninja" width="400" border="1">
      <caption>
        Ninja Details
        <hr>
      </caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Grade</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th colspan="3">Ninja C - the best learner!</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Ninja A</td>
          <td>18</td>
          <td>B</td>
        </tr>
        <tr>
          <td>Ninja B</td>
          <td>23</td>
          <td>C</td>
        </tr>
        <tr>
          <td>Ninja C</td>
          <td>22</td>
          <td>A</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

OUTPUT

Styling Attributes available for <table> tag in HTML Tables

alignThis property is used to align the table to the left, right, or center of the browser window.
backgroundThis property allows us to point to the location of the image, which will be displayed as the background of the table
bgcolorThis property allows us to set a background color for the table
borderThis property allows us to determine the thickness of the border of the table
cellpaddingThis property allows us to add empty spaces between the border of the table cell. 
cellspacingThis property is used to altering the thickness of the border of the table cell
widthThis property changes the width of the table cell 

 

 

 <table summary="Ninja" width="400" align="center" border="3" cellpadding="2" cellspacing="3" >

If we add the above code to the previous example, the table now would be center aligned. Note: We have used border=”3” to set the border width around the table, this makes the value of our border to be in pixels by default. If you want to use different width values you can use and set it by border = 3px/em.   

 

Styling Attributes available for <tr> tag in HTML Tables

alignThis property is used to align the content of each row’s cell.
bgcolorThis property is similar to that of the < Table> tag, but the color is defined for a specific row where the attribute is placed.
valign

This property is used to align the contents of the cell within the row vertically.

 

 

Adding the below-given code to the previous example will create a row within the table that will have all content aligned to the right. The row's cells will all have a background of yellow and the content will all appear at the top of the row's border.

<tr align="right" bgcolor="yellow" valign="top">

Styling Attributes available for <td> tag in HTML Tables

alignThis property is used to align the content in the <td> tag. The default value is left 
backgroundThis property is used to change the background of the specific table cell.
bgcolorThis property is used to change the background color of the specific table cell.
heightThis property is used to determine the height of the data cell in terms of pixels or percentages.
nowrapThis property forces the table to be shown as most wide/stretched out as possible
colspanThis property is used to create a multi-column cell
rowspanThis property is used to declare how many rows that particular cell should span
widthThis property defines the width of the particular data cell in terms of pixels or percentages.

 

If we add the below-given to the previous example we can set a particular color for one data cell and style it accordingly,

<td align="center" bgcolor="lightpink" height="20px">Ninja A</td>

 

This article has covered everything you need to know about HTML tables as a developer. You can explore more by using the information we have provided to create beautiful tables and help users understand the content better on your websites. 

 

Frequently Asked Questions

  1. How do you create a table in HTML?
    Ans: To create an HTML table, we use the tag < table> to define the table element. HTML tables allow us to represent the data in a tabular form using rows and columns. The basic essential tags used to create an HTML table are :
        1. <th> which is used to define the header cell in a table.
        2. <td> which is used to define the data cell in a table.
        3. <tr> which is used to define a row in the table.
     
  2. What are HTML tables used for?
    Ans: HTML tables allow us to represent data that can include text, images, links, forms, or forms fields in a semantic order using rows and columns.
     
  3. What is <colspan> in HTML Tables?
    Ans: The colspan property in HTML indicates the number of segments a cell should range. It permits the single table cell to traverse the width of more than one cell or segment. It gives similar usefulness as "combine cell" in a bookkeeping page program like Excel.
     
  4. What is the difference between a table and a div?
    Ans: HTML Tables are used to define structured or tabular data whereas the div tag is used to define the page layout of the webpage. Table tag is used to display data or text in fewer cases as well as images. Div tag was used to group elements and to format them using CSS. We cannot control the website alignment using the table tag, but we can use CSS in the div tag. 

 

Key Takeaways 

This article has covered all the tags you should know about the Table element in HTML. We have discussed HTML tables' usage and have seen the different styling attributes available for each HTML tag. To summarize, the use of HTML tables is to represent the data in an excel sheet but on a website. This allows users to understand the data entered in rows and columns better than writing paragraphs about it.  If you want to learn more about web development, please explore our courses here

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think