Tables in HTML - Naukri Code 360

Q: How do you create a table in HTML?

Ans: To create an HTML table, we use the tag 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. which is used to define the header cell in a table. 2. which is used to define the data cell in a table. 3. which is used to define a row in the table.

Q: 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.

Q: What is 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.

Q: 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.

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.

What is an HTML Table?

An HTML table is a structured format to display data in rows and columns, making it easier to read and understand. HTML tables are commonly used to organize data such as schedules, financial reports, or any information that fits into a tabular format.

HTML Table Syntax

The basic syntax of an HTML table consists of several tags that define the structure and content of the table. Here are the main tags used in creating an HTML table:

<table>: This tag defines the beginning and end of the table.
<tr> (table row): This tag defines a row in the table.
<th> (table header): This tag defines a header cell in a table, which typically appears as bold and centered.
<td> (table data): This tag defines a standard cell in a table.

Tags and Attributes in HTML Tables

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

align	This property is used to align the table to the left, right, or center of the browser window.
background	This property allows us to point to the location of the image, which will be displayed as the background of the table
bgcolor	This property allows us to set a background color for the table
border	This property allows us to determine the thickness of the border of the table
cellpadding	This property allows us to add empty spaces between the border of the table cell.
cellspacing	This property is used to altering the thickness of the border of the table cell
width	This property changes the width of the table cell

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

align

This property is used to align the content of each row’s cell.

bgcolor

This 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

align	This property is used to align the content in the <td> tag. The default value is left
background	This property is used to change the background of the specific table cell.
bgcolor	This property is used to change the background color of the specific table cell.
height	This property is used to determine the height of the data cell in terms of pixels or percentages.
nowrap	This property forces the table to be shown as most wide/stretched out as possible
colspan	This property is used to create a multi-column cell
rowspan	This property is used to declare how many rows that particular cell should span
width	This 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

How to insert data in table HTML?

Use <tr> for rows and <td> for data cells within a <table> element to insert data.

How to use HTML table for layout?

Use nested <table> elements with <tr> and <td> to create complex layouts, though CSS is recommended for modern layouts.

How to color a table in HTML?

Use the style attribute or CSS classes with properties like background-color and color to add colors to table elements.

How do you create a table in HTML?

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.

What are HTML tables used for?'

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.

What is <colspan> in HTML Tables?

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.

What is the difference between a table and a div?

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.

Conclusion

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.