21

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:

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+
2
  • 3
    You have to use css. if you dont want to use a separate stylesheet. you can use style attribute in your html markup. Sep 4, 2013 at 9:47
  • I don't understand why you don't want to use CSS. Everything you want to achieve is very simple when using CSS: jsfiddle.net/K8hje
    – Jojo
    Sep 4, 2013 at 10:01

8 Answers 8

21

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>

2
  • 2
    This I would say is a short and intelligent solution based on the restrictions he has kept.
    – AurA
    Sep 4, 2013 at 9:54
  • 1
    @NamingException +1 for your very claver answer. Sep 4, 2013 at 9:57
17

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.

0
17

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

0
15

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>
1
  • This approach has been depreacted now because of the cellspacing and cellpadding attributes Jan 28, 2022 at 18:13
9

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.

4
  • @AurA your answer is good but OP clearly said he dont want to use css. Sep 4, 2013 at 9:50
  • yes this will remove all td border and the div border will show... you can see the output... I have updated the jsfiddle answer
    – AurA
    Sep 4, 2013 at 9:50
  • @DevangRathod I just saw he updated the question with no inline styles
    – AurA
    Sep 4, 2013 at 9:51
  • @AurA ya i know you are right but please read again OP issues , he dont want to use css and you set inline style for border. Sep 4, 2013 at 9:52
1

Try:

<table border="1">
  <tr>
    <td>
      <table border="">
      ...
      </table>
    </td>
  </tr>
</table>
0
<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>
1
  • This attribute has been deprecated now Jan 28, 2022 at 18:10
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.