4

Below is a table.

<table border="50%">
        <tr>
            <th>Hello</th>
            <th>World!</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
</table>

How can border be given just 50% and nothing else as a value? What is the black area surrounding the table? Why is one side of the black area darker than the other?

1
  • 2
    The border attribute (not to be confused with the border CSS style) can only be set in pixels and doesn't use a unit specifier. The % is ignored.
    – Ouroborus
    Nov 27, 2020 at 5:13

4 Answers 4

4

According to w3, the border attribute is available for tables. It accepts a value in px units. It can be used to set border to a table. The greater the value, the thicker the border. If we set the value of this attribute to 0, then the table will have no border. There is no default value for this attribute.

It can accept any value, not just 50. When you used 50% as the value, it ignored the % and set a border of 50px to the table.

However, we don't have any control over the style of the border created using border attribute. This is why we should use the css border property to set borders because we can customize the appearance of the border.

Here is a snippet for your reference -

<!--No unit, just the value-->

<table border="50">
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
</table>

<!--Same here. It ignores % and sets a border of 50px-->

<table border="50%">
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
</table>

<!--It can have any value-->

<table border="15">
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
</table>

<!--If its value is set to 0, then table will not have any border-->

<table border="0">
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hello</td>
        </tr>
</table>

4

If you specify the border in % it will ignore the % and consider it to be in px, which is the reason why border looks so bold!!! Either you could specify border in px like:

<table border="2px">

or you could use inline css or any css as per your convenience:

<table style="border:2px solid black">
2

HTML does not support values in px, %, or any other units in the border attribute of tables. But, if you put values in px or %, HTML will still render the border.

This is the format for applying a table border:
<table border="n|0">...</table>
where n is any integer after 1 (only positive values). If you give a value of 0, it will produce a borderless table.

The black area is produced just because of a large value of 50 (percentage will be neglected by the browser).

-2

The HTML border Attribute is used to specify the border of a table. It sets the border around the table cells.

<table border="1">

or

<table border="0">

1: It sets the border around the table cells. 0: It removes (not set) the border around the table cells.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Your Answer

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