CODEWITHSUNDEEP
html
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

How to remove td border with html?

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:

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+

Upvotes: 21

Views: 218985

Answers (8)

AurA
AurA

Reputation: 12363

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.

Upvotes: 9

NamingException
NamingException

Reputation: 2404

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>

Upvotes: 20

Kaye Bryant
Kaye Bryant

Reputation: 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.

Upvotes: -1

Ramnath
Ramnath

Reputation: 438

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

Upvotes: 19

Guest
Guest

Reputation: 159

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>

Upvotes: 15

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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.

Upvotes: 17

Smuuf
Smuuf

Reputation: 6524

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

Upvotes: 0

beautifulcoder
beautifulcoder

Reputation: 11320

Try:

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

Upvotes: 1

Related Questions