What is this weird thing that border="50%" does?

Admin 1
Viewed 204

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?

css html
5 Answers

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>

user_136065090

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

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

user_146311350 

<table style="border : 2px solid green">
        <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>

this is the proper way to add a border to a table , if you want to add a border to the rows also apply the same style on of the table

user_147057310

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

user_124557880
Related