How to Create a Table in HTML: Tags, Syntax, and Styling

Tables in HTML provide a clear and structured way to organise and present information using rows and columns. They are commonly used to show data like schedules, price lists, or comparisons. If you’re learning how to create a table in HTML, you’ll find it easy once you understand the basic tags and structure. Tables are built using a few simple elements like rows, cells, and headers. By styling your table with colours, borders, or padding, you can make it more attractive and easier to read. 

In this article, you will understand what HTML tables are. We will also explain the tags used to create tables, their syntax, and how to style them using CSS.

What is an HTML Table?

An HTML table is a tool used to display data in a grid format with rows and columns. It helps organise information clearly, making it easy to read. For example, tables are used to display timings, rules, pricing lists, or comparison charts. To learn how to create a table in HTML, you can start by learning simple tags that help define rows and cells. Each table consists of various elements that enhance its organisation and visual appeal. For instance:

• Cells: These are the individual boxes where data is stored. You can adjust their size, colour, and alignment to improve readability.
• Headers: Header cells often contain titles or labels and are typically styled using <th> tags. These cells are bold by default and help distinguish the headers from the rest of the table.
• Borders: Borders define the edges of the table and its cells. You can customise their thickness, colour, and style (solid, dashed, etc.).
• Spacing and Padding: You can add spacing between cells or padding within them to make the table less cramped and more visually appealing.
• Colours: Applying background or text colours can help highlight specific rows, columns, or cells to emphasise important information.

By focusing on these elements, you can create tables that are not only functional but also visually attractive. This provides clarity, especially when presenting complex data.

Tags Used in HTML Tables 

HTML tables are created using simple tags that define the structure. Each tag has a specific role, such as creating rows or adding headers. These tags allow you to build structured tables. Understanding them is the first step to learning how to create a table in HTML. With this knowledge, you can even learn to create multiple tables as needed.

Below is a table of the most commonly used tags in HTML tables.

Tag	Description
<table>	Defines the table.
<tr>	Represents a row in the table.
<th>	Creates a header cell, usually bold and centred.
<td>	Adds a standard data cell.
<caption>	Adds a title or description to the table.
<thead>	Groups header rows for better organisation.
<tbody>	Groups the main content rows.
<tfoot>	Groups footer rows are often used for totals or summaries.

HTML Table Syntax

HTML tables display information in an organised way using rows and columns. They help exhibit data such as financial reports, product lists, or pricing in a neat format. To build a table, you use specific tags that define the table’s structure, such as <table>, <tr>, <td>, and <th>. Understanding the syntax is essential because it forms the foundation for organising and displaying data within a table.

To learn how to create a table in HTML, you need to know the basic tags and their roles. Below is a simple syntax for an HTML table:

<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>

Explore How to Add An Image in HTML here!

How to Create a Table in HTML?

Creating a table in HTML is simple if you follow the proper steps. Tables help to organise and display data using rows and columns in a systematic way. To begin, you need to use specific HTML tags that define the structure of the table, rows, and cells. Each table starts with a <table> tag, which acts as the main container.

Here’s how to create a table in HTML in easy steps:

1. Start with the <table> Tag:
   Begin your table by using the <table> tag. This tag acts as the main container for the entire table structure.
2. Add Table Rows with the <tr> Tag:
   Inside the <table> tag, use the <tr> (table row) tag to create rows. Each <tr> represents one horizontal row in the table.
3. Insert Table Headings with <th> Tags (Optional):
   If your table has headings, add them using <th> (table header) tags. These tags are placed inside the <tr> tag and define the labels for each column.
4. Add Data with <td> Tags:
   For the actual data, use <td> (table data) tags. Each <td> represents one cell within the row. Place these tags inside the <tr> tag to fill the row with data.
5. Close the <table> Tag:
   After adding all rows and cells, close the table with the </table> tag. This ensures that the table structure is complete.

By following these steps, you can learn how to create a table in HTML to display information in a clear and structured format.

Discover How to Link to HTML Pages here!

How to Style Tables in HTML?

Styling tables in HTML makes them more readable and visually appealing. You can use various techniques to format the table, such as adding borders, padding, and spacing. These styles are applied using HTML attributes or Cascading Style Sheets (CSS). Knowing how to create a table in HTML and then styling it ensures the table is easy to understand and looks organised.

Listed below are some common tips for styling tables:

1. Adding Border:To add a border around the table and its cells, use the border attribute in the <table> tag or apply CSS.

Table Tag Format:

<table border=”1″></table>

CSS Format:

table { border: 1px solid black; }

2. Adding Collapsed Borders: Collapsed borders combine the borders of adjacent cells into one, making the table look cleaner. 

Table Tag Format:

<table border=”1″ style=”border-collapse: collapse;”> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

CSS Format: 

table { border-collapse: collapse; }

3. Adding Padding: Padding adds space inside the table cells to make the content less cramped. 

Table Tag Format:

<table border=”1″ style=”border-collapse: collapse;”> <tr> <th style=”padding: 10px;”>Header 1</th> <th style=”padding: 10px;”>Header 2</th> </tr> <tr> <td style=”padding: 10px;”>Cell 1</td> <td style=”padding: 10px;”>Cell 2</td> </tr> </table>

CSS Format: 

td, th { padding: 10px; }

4. Adding Multiple Rows and Columns: To create tables with multiple rows and columns, use the <tr> tag for rows and the <td> tag for columns. This method is essential for organising complex data while learning how to create a table in HTML.

For example:

<table border=”1″> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

5. Merging Cells with Colspan and Rowspan: To merge cells horizontally or vertically, you can use the colspan and rowspan attributes in the <td> or <th> tags:

• • Colspan: Merges cells horizontally.
    Example:

<table border=”1″> <tr> <td colspan=”2″>Merged Column</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

• Rowspan: Merges cells vertically.
  Example:

<table border=”1″> <tr> <td rowspan=”2″>Merged Row</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 2</td> </tr> </table>

Why Choose Digital Regenesys for UI/UX and Graphic Design Course with Gen AI?

Digital Regenesys offers an online UI/UX and Graphic Design Course with GenAI. It is designed for learners seeking to master modern design techniques and tools. This six-month course covers everything from graphic design basics to advanced skills in UI/UX design, incorporating Generative AI (GenAI) for innovative learning. The course also includes practical sessions on software like Adobe Creative Cloud, Figma, and Canva, giving students practical experience to build a competitive portfolio. With this course, you can learn how to create a table in HTML and explore advanced graphic design techniques. 

Key features of the course are listed below:

• Globally Recognised Certificates: On successful completion, you receive 12 certificates that add credibility to your skills.
• Curriculum with Generative AI Integration: Learn to use AI tools to create innovative designs and enhance workflows.
• Experienced Faculty: Gain insights and mentorship from professionals with extensive experience in design and AI.
• Flexible Online Learning: Weekend classes and online modules allow you to learn at your own pace.
• Hands-On Practice: Master tools like Figma, Adobe Photoshop, Illustrator, InDesign, and Canva with practical assignments.

In conclusion, learning how to create a table in HTML is a simple process that involves using a few essential tags. Understanding the role of tags will help you create organised tables to display data clearly. Additionally, styling your tables with borders, padding, and spacing can make them visually appealing and easy to read. You can check out the Digital Regenesys website to learn more about our UI/UX and Graphic Design Course with GenAI and understand how it can help you learn the basics and advanced concepts of HTML. 

How to Create Table in HTML? FAQs