How To Create Table In HTML With Border
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to create table in HTML with border, in HTML, <table> tag is used for creating a table.
A row of the table can be created using <tr> tag. Inside a table row, a table header cell can be created using <th> tag and a table data cell can be created using <td> tag.
Border can be given to the table using “border” attribute of <table> tag.
Step By Step Guide On How To Create Table In HTML With Border :-
<html> <head> <title>Table with border</title> </head> <body> <table border=3> <tr> <th>Sr. No.</th> <th>Name</th> <th>Surname</th> </tr> <tr> <td>1</td> <td>Jayesh</td> <td>Shah</td> </tr> <tr> <td>2</td> <td>Akshay</td> <td>Nair</td> </tr> <tr> <td>3</td> <td>Dilip</td> <td>Soni</td> </tr> </table> </body> </html>
- In this code, first of all, we are creating an HTML document using <html> tag.
- In it, we are defining head section of the HTML document using <head> tag. In the head section of the HTML document, we are specifying the title of the web page as “Table with border” using <title> tag. We are closing <title> tag using </title> and we are closing <head> tag using </head>.
- After the head section, we are defining body section of the HTML document using <body> tag. In <body> tag, we are creating table using <table> tag. We are using “border” attribute of <table> tag to set the border of the table to 3 pixels.
- In <table> tag, we are using four <tr> tags to create 4 rows. We are closing each <tr> tag using </tr>.
- In the first <tr> tag, we are using three <th> tags to create 3 table header cells. We are specifying “Sr. No.”, “Name” and “Surname” as column headings for the 3 columns of the table respectively in <th> tags. We are closing each <th> tag using </th>.
- In the second <tr> tag, we are using three <td> tags to create 3 table data cells. We are specifying “1”, “Jayesh” and “Shah” as data for the 3 cells respectively in <td> tags. We are closing each of the three <td> tags using </td>.
- In the third <tr> tag, we are using three <td> tags to create 3 table data cells. We are specifying “2”, “Akshay” and “Nair” as data for the 3 cells respectively in <td> tags. We are closing each of the three <td> tags using </td>.
- In the last <tr> tag, we are using three <td> tags to create 3 table data cells. We are specifying “3”, “Dilip” and “Soni” as data for the 3 cells respectively in <td> tags. We are closing each of the three <td> tags using </td>.
- Then, we are closing <table> tag using </table>. Then, we are closing <body> tag using </body>. Finally, we are closing <html> tag using </html>.
Conclusion :-
Thus, we can create table in HTML using <table> tag, define table rows using <tr> tags, define table header cells using <th> tags, define table data cells using <td> tags and we can give border to the table using “border” attribute of <table> tag.
I hope this tutorial on how to create table in HTML with border helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
