How to remove td border with html? - html

Question

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:
+---+---+
| | |
+---+ |
| | |
+---+---+

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

<table border="1">
<tr>
<td>one</td>
<td style="border-bottom-style: hidden;">two</td>
</tr>
<tr>
<td>one</td>
<td style="border-top-style: hidden;">two</td>
</tr>
</table>

Answer 5

Surround it with a div and give it a border and remove the border from the table
<div style="border: 1px solid black">
<table border="0">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</div>
You can check the working fiddle here
As per your updated question .... where you want to add or remove borders.
You should remove borders from the html table first and then do the following
<td style="border-top: 1px solid black">
Assuming like you only want the top border. Similarly you have to do for others. Better way create four css class...
.topBorderOnly {
border-top: 1px solid black;
}
.bottomBorderOnly {
border-bottom: 1px solid black;
}
Then add the css to your code depending on the requirements.
<td class="topBorderOnly bottomBorderOnly">
This will add both top and bottom border, similarly do for the rest.

Answer 6

Try:
<table border="1">
<tr>
<td>
<table border="">
...
</table>
</td>
</tr>
</table>

Answer 7

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>one</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 8

The rules="none" worked perfectly for me just now. I can't seem to get borders back around specific cells no matter what I try. I'm new though, been teaching myself with certificate courses and YouTube tutorials. I'm writing my first HTML CSS webpage. I plan to put images in the cells so I can add a border around those no problem. Just wanted to share in case someone else gets stumped by trying to get borders back on specific cells.