How to completely remove borders from HTML table

Tables are a fundamental way to organize data on the web, but sometimes their default borders can interfere with your design aesthetics. Whether you’re crafting a minimalist layout, creating a seamless data display, or simply aiming for a cleaner look, understanding how to completely remove borders from HTML table elements is a crucial skill for any web developer or designer. While tables inherently come with default styling in most browsers, modern web design often dictates a more customized approach, typically achieved through Cascading Style Sheets (CSS). This guide will walk you through various effective methods to eliminate those pesky lines, ensuring your data presentation is both functional and visually appealing.

Understanding Default Table Borders and Why They Appear

When you create a basic table using only

| , and | tags, browsers typically render them with visible borders. These borders serve to delineate cells and make the structure of the data clear. Historically, the border attribute directly on the The challenge arises when these default borders clash with your intended design. For instance, if you’re trying to create a table that blends seamlessly into the background or one where the visual separation of cells is handled by other design elements like background colors or spacing, the standard borders become an obstacle. Removing them allows for a much cleaner canvas, giving you full control over the table’s visual presentation. This control is paramount for achieving modern web design aesthetics, where subtle visual cues often replace overt structural lines. Modern web development strongly advocates for separating content (HTML) from presentation (CSS). This principle is key when it comes to styling tables. Instead of relying on outdated HTML attributes, we leverage CSS properties to manage everything from cell padding and spacing to the complete removal of borders. This not only makes your code cleaner and easier to maintain but also ensures better cross-browser compatibility and responsiveness across different devices. The Primary Method: Leveraging CSS border-collapse and border Properties ———————————————————————— The most effective and widely accepted method to completely remove borders from HTML table elements involves using specific CSS properties. This approach provides granular control and ensures compatibility across modern browsers. The core of this technique lies in setting the border property to none for table cells and the border-collapse property for the table itself. To effectively eliminate all borders, you need to target the table, its cells ( | and | ), and potentially the rows ( For example, to remove all borders, you would typically apply the following CSS rules: table { border-collapse: collapse; / Collapses adjacent borders into a single border / } th, td { border: none; / Removes borders from table headers and data cells / padding: 8px; / Optional: Adds some internal spacing / } This snippet is your go-to solution for a clean, borderless table. The border-collapse: collapse; on the table element ensures that any default spacing between cells is removed and that borders on adjacent cells would collapse into one if they existed. Then, border: none; applied to both | and | elements explicitly tells the browser not to draw any borders around individual cells. This combination successfully makes your table appear without any visible dividing lines, providing a sleek and unobstructed view of your data. This method is highly recommended by web standards bodies like the W3C and is supported by all modern browsers, making it a robust and future-proof solution for table styling. For more in-depth knowledge on table styling with CSS, you can refer to MDN Web Docs on border-collapse. Implementing Border Removal: Inline, Embedded, and External Styles —————————————————————— There are three primary ways to apply CSS to your HTML document, each suitable for different scenarios. Understanding when to use each method is key to efficient and maintainable code. Regardless of the method chosen, the CSS properties remain the same: border-collapse: collapse; for the table and border: none; for | and | elements. ### 1. Inline Styles (Least Recommended for Reusability) Inline styles are applied directly to individual HTML elements using the style attribute. While quick for one-off changes, they are generally discouraged for complex styling due as they mix presentation with content, making the code harder to read, maintain, and update. However, for a very specific, single instance where you might not have access to stylesheets, it’s an option. <table style="border-collapse: collapse;"> <tr> <th style="border: none; padding: 8px;">Header 1</th> <td style="border: none; padding: 8px;">Data 1</td> </tr> </table> As you can see, this becomes cumbersome quickly, especially for tables with many cells. It also violates the separation of concerns principle, making your HTML less clean. ### 2. Embedded Styles (Good for Single Page Applications) Embedded styles are defined within the  <style> table { border-collapse: collapse; } th, td { border: none; padding: 8px; } </style>  <table> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td>Laptop</td> <td>$1200</td> </tr> <tr> <td>Mouse</td> <td>$25</td> </tr> </table> This approach is much cleaner than inline styles and is suitable for situations where the styling is unique to that particular page. For example, a single-page marketing landing page might use embedded styles. ### 3. External Styles Question & Answer : My goal is to make an HTML page that is similar to a “photo frame”. In other words, I want to make a blank page that is surrounded by 4 pictures. This is my code: <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> And the CSS classes are the following: .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); } .middle { width: 536px; height: 280px; } .bRight { width: 212px; height: 280px; background-image: url('../Images/BackRight.jpg'); } .bBottom { width: 960px; height: 111px; background-image: url('../Images/BackBottom.jpg'); } My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces? <table cellspacing="0" cellpadding="0"> And in css: table {border: none;} EDIT: As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl’s border-collapse solution. I actually quite dislike this change so far (don’t work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border’s “priority” calculated and what border styles are “stronger” (double vs. solid etc.). I did like this: <table cellspacing="0" cellpadding="0"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> ---------- .first {border-bottom:1px solid #EEE;} .second {border-top:1px solid #CCC;} Now, with border collapse, this won’t work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow: <table class="tab"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> <style> .tab {border-collapse:collapse;} .tab .first {border-bottom:1px solid #EEE;} .tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;} </style> You could also use something like “groove\|ridge\|inset\|outset” border style with just a single border. But for me, this is not optimal, because I can’t control both colors. Maybe there is some simple and nice solution for collapsing borders, but I haven’t seen it yet and I honestly haven’t spent much time on it. Maybe someone here will be able to show me/us ;) | |—|—|—|—|—|—|—| | |—|