All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Remove Table Border In HTML

Last Updated : Mar 11, 2024

How To Remove Table Border In HTML

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>
  1. Firstly, we write <! DOCTYPE html> which is an instruction to the web browser about the version of HTML the file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. The <body> tag contains the entire coding for the web page. I am coming to the <style> tag description soon.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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>.
  11. 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.
  12. 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.
  13. 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!
  14. 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;}
  15. 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.
  16. 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.
  17. 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.