All TalkersCode Topics

Follow TalkersCode On Social Media

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

HTML Table Outer Border No Inner Border

Last Updated : Mar 11, 2024

HTML Table Outer Border No Inner Border

In this tutorial we will show you the solution of HTML table outer border no inner border, in HTML today we will show you how you are able to make a table in html with outer border but there are no inner borders. Inside the table, there is a combination of cells.

Whereas cells are combination of rows and columns. Means, in table cells are made with the help of tr, td and th.

Now, let us understand how we are able to apply no inner borders.

Step By Step Guide On HTML Table Outer Border No Inner Border :-

As, we already say that inside table there are cells and in table are combination of tr, td and th.

So, let us understand how we are able to disappear border of the inner tags. So, that there are no borders inside the table.

Here, below we show you some codes, in which there are no inner borders in html. The code is given below as:

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        <style>
        table{
   border: 1px solid black;
  }
    </style>
</head>
<body style="text-align: center;">
   <tabl>
        <tr>
            <th>
                first name
            </th>
            <th>
                last name
            </th>
        </tr>
        <tr>
            <td>
                Robert
            </td>
            <td>
                Shampoo
            </td>
        </tr>
        <tr>
            <td>
                Rock
            </td>
            <td>
                kill
            </td>
        </tr>
    </table>
</body>
      </html>

Another Way

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        <style>
        table{
   border: 1px solid black;
  }
  tr, td, th{
   border:none;
   }
    </style>
</head>
<body style="text-align: center;">
   <tabl>
        <tr>
            <th>
                first name
            </th>
            <th>
                last name
            </th>
        </tr>
        <tr>
            <td>
                Robert
            </td>
            <td>
                Shampoo
            </td>
        </tr>
        <tr>
            <td>
                Rock
            </td>
            <td>
                kill
            </td>
        </tr>
    </table>
</body>
      </html>
  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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. The first way is to apply no borders on them. We can only apply border on table with the help of border property, you can also see in example that how we are able to done this.
  7. The next way is useful when if there first method gets failed then you can apply second in which most codes are same as previous with some difference that we apply one more border property in style tag. But this is applied on cells with the help of tr, td and th. The property applied here is of border with value none. With the help of this border applied gets removed.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article you are able to make a table with outer borders and no inner borders. I hope this tutorial on HTML table outer border no inner border helps you.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪