html
<table border="1">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
This will output borders like this
+---+---+
| | |
+---+---+
| | |
+---+---+
But I would like to display the border in table only not to td like this
+--------+
| |
| |
| |
+--------+
How can I do just with html markup. (NO CSS / NO INLINE STYLES)
In some cases I need to remove some td borders only and some td border to display something like this:
+---+---+
| | |
+---+ |
| | |
+---+---+
We can set the border property to none to remove the border from an HTML table. The property is short-hand of different border properties. Those different properties are border-width , border-style and border-color . A border won't be formed when we use the border property and set it to none.
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed. This is even better than brute forcing it with ! important as I did :D.
Use the CSS property border on the <td> s following the <tr> s you do not want to have the border. In my example I made a class noBorder that I gave to one <tr> . Then I use a simple selector tr.
Table without Border is one of the ways of table representation. The table format can also be achieved using other HTML tags like ul > li, div, etc., but the use of a table for tabular structure reduces the styling work while the use of div for tabular design is increasing due to the responsive design approach.
simple solution from my end is to keep another Table with border and insert your table in the outer table.
<table border="1">
<tr>
<td>
<table border="0">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</td>
</tr>
</table>
To remove borders between cells, while retaining the border around the table, add the attribute rules=none
to the table
tag.
There is no way in HTML to achieve the rendering specified in the last figure of the question. There are various tricky workarounds that are based on using some other markup structure.
First
<table border="1">
<tr>
<td style='border:none;'>one</td>
<td style='border:none;'>two</td>
</tr>
<tr>
<td style='border:none;'>one</td>
<td style='border:none;'>two</td>
</tr>
</table>
Second example
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td style='border-left:none;border-top:none'>one</td>
<td style='border:none;'>two</td>
</tr>
<tr>
<td style='border-left:none;border-bottom:none;border-top:none'>one</td>
<td style='border:none;'>two</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With