All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Table Border In HTML

Last Updated : Mar 11, 2024

Table Border In HTML

In this tutorial we will show you the solution of table border in HTML, in HTML, we know that there is tag named table in HTML which is used to make and show table on browser screen.

Table is a combination of rows and columns and each intersection of rows and columns is known as cell. Mostly, cells are used to store data. You are able to make as much as row and columns you want.

Step By Step Guide On Table Border In HTML :-

As, tables are also can be used in HTML. So, in background there must be some tags which are used to make table. Hence, that tag is table tag, which is paired tag and to make rows and columns, we have to use tr and td tags in table tag.

Whereas for making header in table th is used. Today our topic is about table borders, so in next example we will show you many types of table borders.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
<link rel=”stylesheet/css” src=”style1.css”>
         </head>
          <body>
    <!-- a simple table  -->
    <table >
        <tr>
            <th>
                Name
            </th>
            <th>
                Class
            </th>
            <th>
                Stream
            </th>
        </tr>
        <tr>
            <td>
                Robert
            </td>
            <td>
                1st
            </td>
            <td>
                computer
            </td>
        </tr>
        <tr>
            <td>
                Thanos
            </td>
            <td>
                5th
            </td>
            <td>
                arts
            </td>
        </tr>
    </table>
</body>
      </html>

We have created a CSS file with name style1.css

table, th, td{
            border: 1px solid black;
        } 
         table, th, td{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            background-color: aqua;
            border-color:red;
        } 
        th, td{
            border-radius: 50%;
            border: 1px solid black;
        }
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Before closing head tag, here we link a css file whose name is style1.css.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, in body tag we create table tag, in which we create td, tr, th, which are used to create table.
  6. After, this a css file is given above, in which we use four different styles of table borders, you can use any one from them and can use one by one to see what the output they give.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that you are able to style borders after reading this article, in this article, we show you the use of borders, colored borders, border collapsed, border radius.

After this there is an assignment from ourselves to make table in which you use border width attribute. I hope this tutorial on table border in HTML helps you.