In this tutorial we will show you the solution of how to remove table border in HTML, as we know, in HTML we can create tables using specific tags. A table contains rows and columns and each component or unit of the table is called a cell.
Additionally, we can also decorate a table in many ways, for e.g we can apply border to a table. This tutorial will cover the aspect of removing border from a table, which already has a border.
Step By Step Guide On How To Remove Table Border In HTML :-
As we know, a table is defined by <table> tag in HTML. A table contains rows and columns.
A row is denoted by <tr> tag. Each cell of the row is defined by <td> tag where td stands for table-data.
The elements of <td> are placed horizontally, thereby making up columns.
A special form of <td> is <th> which stands for table-header. It is used if we specifically want a particular row’s contents to serve as column headings.
All the above tags, <table>,<tr>,<td>,<th> are container tags, i.e they having opening and closing tags and contain content within them.
<!DOCTYPE html>
<html>
<head>
<title>How To Remove Table Border In HTML</title>
</head>
<style>
.with-border,
.with-border td,
.with-border th {
border: 1px solid black;
}
.without-border,
.without-border td,
.without-border th {
border: 0px;
}
</style>
<body>
<p>A simple table with 2 rows and 2 columns is shown below</p>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>P</td>
<td>25</td>
</tr>
</table>
<p>A simple bordered table with 2 rows and 2 columns is shown below</p>
<table class="with-border">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>P</td>
<td>25</td>
</tr>
</table>
<p>The same table having 2 rows and 2 columns with the borders completely removed, is shown below. We now get the same table we started with</p>
<table class="without-border">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>P</td>
<td>25</td>
</tr>
</table>
</body>
</head>
</html>
- Firstly, we write <! DOCTYPE html> which is an instruction to the web browser about the version of HTML the file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Thirdly, the <head> tag contains information about the web page. The enclosing <title> tag is used to specify the title of the webpage. You can see, it is displayed on the browser tab. Titles are displayed on browser tabs of webpages.
- The <body> tag contains the entire coding for the web page. I am coming to the <style> tag description soon.
- You can see a <p> tag stating a simple line about a simple table, which is by default without any borders. It is a paragraph tag, which is used to write words, sentences, paragraphs, etc. All the above tags, i.e <html>, <head>, <title>, <body>, <p> are paired or container tags, i.e they contain content within them and have ending tags </html>, </head>, </title>, </body>, </p> respectively.
- A <table> tag is then used to define a table with rows defined by <tr> tags and data cells defined by <td> tags. Special <td> cells serving the purpose of table headers are defined by <th> tags. All the above tags i.e <table>, <tr>, <td>, <th> are paired or container tags, i.e they contain content within them, as you see and have ending tags </table>, </tr>, </td>, </th> respectively.
- Our reference table will a 2-row, 2-column table with respective cells showing the header Name and header Age in the 1st row and the name P and age 25 in the respective cells in the 2nd row. Thus the two columns are Name and Age which are the table headers.
- Again another <p> tag describes a bordered table now. We use a class attribute for this table and set it as “with-border” to help us easily identify and access it. You can think of it as naming the table. A class attribute can be used with any HTML tag to help us name and identify it. It signifies that this table belongs to “with-border” class. The contents of the table are same. We are just about to understand the <style> tag defined and skipped purposefully, earlier.
- Yet another <p> tag describes an unbordered table now. We use a class attribute for this table and set it as “without-border” to help us easily identify and access it. It signifies that this table belongs to “without-border” class. The contents of the table are same.
- Your patience is rewarded. We defined a <style> tag and see some definitions within. The <style> tag is used to style, decorate any HTML element as per our wish. We write the name of the element, e.g table and within curly braces { }, set values (which are called values only) to some parameters (which are called properties) of the element, which is a table. The <style> tag is also a paired or container tag and has ending tag </style>.
- We first write the property name (e.g border) followed by a colon “:” and then the set value ending with a semicolon “;”. For this tutorial, we will be setting the border property of the table.
- If some HTML element has a class name with it (e.g the table with class name as “with-border”), it can also be styled using <style> tag and same above process.
- To demonstrate how to remove border from a table we needed to show You how a bordered table is defined. Then we can demonstrate how to remove the border and You can understand it easily!
- We can also apply styling to multiple elements at once by using the element names separated by a comma. For e.g table, td, tr {border:1px solid black;}
- Drawing from above steps we now apply styling to the table and its elements with “with-border” class. We write .with-border, .with-border td, .with-border th to style the table, its data cells denoted by <td> and the header <th> respectively (all belonging to “with-border” class). Now within the curly braces we write border: 1px solid black; to set the border thickness of the table and its cells to 1 pixel with solid black colour which is default.
- In the following section of the <style> tag we similarly apply styling to the table and its elements with “without-border” class. This is where we will remove the border of the table. We simply write write border: 0px; and set the border thickness of the table and its cells to 0 pixel. There is no need of mentioning the border colour.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, we can say that with the help of this tutorial we are able to remove the border of a table in HTML.
I hope this tutorial on how to remove table border in HTML helps you and the steps and method mentioned above are easy to follow and implement.
