Create A Table In HTML: Step By Step Explanation

Do you need to create a table in your web user interface to present your data in an optimised way. Well tables help you organise your data into rows and columns. Tables are used to present data, such as product costing, timings, expenditure charts, etc.

In this blog, we will have to create a table in HTML by adding a desired number of rows and columns for your interface. Tables make the data organised and easier to read. You can easily create a table in html and use it in the HTML documents using the <table> tag.

Table of Contents

The <table> Tag In HTML Document

With HTML table tag web developers can easily organise data into various rows and columns. With the <table> tag you can easily add rows and columns based on your requirement. The Table tag consists of the table heading, table rows and table columns as attributes where you can provide data explicitly.

Table Tag Syntax

Let us take some of the examples where you can create a table in html using the <table> tag.

<table>

<tr>

</tr>

</table>

Table Cells in the HTML Document

Let us understand how we can use the HTML tag <table> to create a complete table in html with cells, rows, and columns.

In the table you can define the cell by using the <td> and </td> tag. In this td stands for table data. Everything included between the <td> and </td> tag is the content of the table in HTML.

<table>

<tr>

<td> PW Skills </td>

<td> Welcome to PW Skills </td>

<td> Online learning program </td>

</tr>

</table>

Create a table in html

In table cells you can contain all sorts of HTML elements i,e. Text, images, lists, links, audio, video and other elements.

Table Rows In the HTML Document

When you create a table in html then you can add or create a table in html with rows using the <tr> </tr> tags. In the html document “tr” stands for table row. You can add any number of rows in the HTML table based on your need.

<table>

<tr>

<td> PW Skills </td>

<td> Welcome to PW Skills </td>

<td> Online learning program </td>

</tr>

</table>

Fundamentals of HTML Table Tags

Data is organised into rows and columns with opening and closing table tags.
The HTML <table> tags can be used to create a table in html any number of rows and columns.
The <table> tag can be embedded anywhere in the body section of an HTML document.
You can use the styling attributes in HTML table tags.
The table tag contains table head, table rows, and table columns as an attribute.

For example, let us take a simple example to list all elements in table tag containing rows, columns and heading tabs.

<table>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

</tr>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

</tr>

</table>

Table Headers In HTML Document

Table headers are like captions or important elements in the table where you can represent the header cells to represent the content inside the table. The table headers are used to tell the content of the rows and columns in the table.

<tr>

<th>PW Skills</th>

<th>Welcome to PW Skills</th>

<th>Online Learning Program</th>

</tr>

<tr>

<td>Courses Offered</td>

<td>Learn at Your Own Pace</td>

<td>Join the Community</td>

</tr>

<tr>

<td>Skill Development</td>

<td>Expert Instructors</td>

<td>Interactive Learning</td>

</tr>

<tr>

<td>Certification</td>

<td>Hands-On Projects</td>

<td>Flexible Schedule</td>

</tr>

</table>

The following above code will help you create a table in html as it contains every element i,e. Table headers, table rows, and table columns. The first row in the table created contains headers i,e. <th> and the subsequent rows contain regular data such as <td> tags.

HTML Table Tags In Web Development

Check the HTML tags related to the table used to create a table in the html document below.

HTML Tag	Description
<table>	Defines the entire table and contains all other table elements.
<tr>	Defines a row in the table, which can contain one or more cells (either header or data cells).
<td>	Defines a data cell within a row, used to display information or data in the table.
<th>	Defines a header cell in the table, typically used for column or row headings. Text is bold and centered by default.
<thead>	Groups the header content in the table, containing one or more rows (<tr>) and header cells (<th>).
<tbody>	Groups the main content of the table, which contains one or more rows (<tr>) and data cells (<td>).
<tfoot>	Groups the footer content of the table, usually containing summary rows or other footer data.
<col>	Specifies column properties, such as width or styles. Typically used inside a <colgroup> element.
<colgroup>	Groups one or more columns and allows the application of column-specific styles or properties.
<caption>	Defines a title or description for the table, which can appear above or below the table content.

Add Border to A HTML Table

You can add tables with borders easily using the CSS Styles. You can add a border attribute to the html table tag and specify the border size easily. Let us understand it completely with a simple example given below.

<tr>

<th>PW Skills</th>

<th>Welcome to PW Skills</th>

<th>Online Learning Program</th>

</tr>

<tr>

<td>Courses Offered</td>

<td>Learn at Your Own Pace</td>

<td>Join the Community</td>

</tr>

<tr>

<td>Skill Development</td>

<td>Expert Instructors</td>

<td>Interactive Learning</td>

</tr>

<tr>

<td>Certification</td>

<td>Hands-On Projects</td>

<td>Flexible Schedule</td>

</tr>

</table>

How to Make the Table Responsive?

You can easily create a table in html and make it responsive using the CSS overflow and bootstrap responsive tags.

.table-container {

Overflow-x: auto;

}

You can also use the bootstrap pre designed elements to make the table responsive based on different screen sizes.

<tr>

<th>Header</th>

</tr>

</table>

</div>

Learn Full Stack Web Development With PW Skills

Become a web developer and gain full stack development skills i,e. Front end and backend development with PW Skills Full Stack Web Development Course. Enroll in this course and get interactive coursework with industry led live sessions and recorded format lectures. You will learn how to create a table in HTML and use other tags for web development projects.

Strengthen your concepts using practice exercises, real world projects, module assignments, and more. Get industry recognised certification after completing the course modules only at pwskills.com