Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove td border with html?

Tags:

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:

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+
like image 719
Bhojendra Rauniyar Avatar asked Sep 04 '13 09:09

Bhojendra Rauniyar


People also ask

How do you remove borders in HTML?

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.

How do I hide TD border in CSS?

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.

How do I hide the TR border in HTML?

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.

How do I make a table without Borders in HTML?

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.


3 Answers

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>
like image 91
Naveenkumar K Avatar answered Oct 29 '22 04:10

Naveenkumar K


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.

like image 36
Jukka K. Korpela Avatar answered Oct 29 '22 04:10

Jukka K. Korpela


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>
like image 14
Guest Avatar answered Oct 29 '22 02:10

Guest