How to Create a Table With a Border in HTML?
There are different kinds of table borders that are available in HTML. You can use these borders according to your own choice. However, in the three examples listed below, we will be sharing with you the methods of creating three of the most commonly used table borders in HTML.
Example 1: Creating a Collapsed Table Border
A collapsed table border is the one in which the borders of all the cells of a table collapse and merge into a single solid border. In this example, we will show you how you can create a collapsed table border in HTML by using the following HTML script:
In this example, we have created a table in HTML with the help of the table tag. We have selected a “1-pixel solid black” border for this table, and we have also chosen this border to be collapsed, i.e., all the cells of the table will have the very same border. Then, we wanted this table to have two different columns, namely “Employee” and “Designation” and we wanted to have the records of two different employees in this table. Therefore, we have mentioned the names of those employees and their respective designations within separate “tr” and “td” tags of HTML.
When we executed the above-mentioned HTML script, our table with collapsed border appeared on the web page, as shown in the image below:
Example 2: Creating an Invisible Table Border
An invisible table border is the one in which we choose a background color for all the cells of our table while keeping the color of the table border as “white” because of which it feels like our table is borderless. To create such a table in HTML, you will have to use the following HTML script:
In this script, we have set our table border color as white so that it can appear invisible. Then, we have chosen random background color for all the cells of our table. After that, we used the same table entries that we used in our first example.
Now, when we executed this HTML script, our table with an invisible border appeared on the web page, as shown in the image below:
Example 3: Creating a Dotted Table Border
As the name says, a dotted table border is one whose border is in the form of dots rather than being solid. To create such a table in HTML, you will have to refer to the following script:
In this example script, we have chosen the dotted border style for our table. After that, the rest of the table entries are exactly the same as those we have used in our first two examples.
Upon execution, this HTML script rendered a table with a dotted border on the web page, as shown in the image below:
Conclusion
This tutorial was created to demonstrate the usage and creation of table borders in HTML. To explain that to you in detail, we talked about three different kinds of table borders in HTML. You can clearly see the impact of changing the border style on the overall look of your table from the examples shown above. Therefore, now, you can conveniently choose the table border that you like the best and create it within seconds. Moreover, you can also explore other table borders that are available in HTML on your own.
