All TalkersCode Topics

Follow TalkersCode On Social Media

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

Table Tag Attributes In HTML

Last Updated : Mar 11, 2024

Table Tag Attributes In HTML

In this tutorial we will show you the solution of table tag attributes in HTML, in HTML there are many tags which are used to create a website and from them one tag is named as table tag.

Table tag is used to make a table in html. A table is a combination of rows and columns.

Whereas the rows are in horizontal order and columns are in vertical order. The intersection of rows and columns is known as cell.

Today, we talk about attribute used in table tag. Let us understand them.

Step By Step Guide On Table Tag Attributes In HTML :-

As, you know that today we talk about attributes of table tag in html. In general, there are many attributes which are used with table.

We will show you an example in html codes in which we use attributes of table tag. And let us understand them one by one.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        <style>
        /* To apply border to a table, its rows, data and headers */
        table, tr, td, th{
            border: 3px solid black;
        }
        /* to collapse border, # single line border */
        table, tr, td, th{
            border-collapse: collapse;
        }
        /* to align table right */
         table{
            float: right;
        }
        /* to align table in center of body, margin from both- left, right side become equal */
        table{
            margin: auto;
        }
        /* to change background color of table */
        table{
            background-color: red;
        }
        /* for apply padding in table */
        th, td{
            padding: 20px;
        }
        /* to change width of table */
        table{
            width: 800px;
        }
    </style>
</head>
<body style="text-align: center;">
    <table>
        <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. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  5. Here, we create a table with the help of table rows, table data and table headers. That are as tr, td, th respectively. If you don’t know what is table and want to know about table, then you are read our published article on tables.
  6. Whereas in case of attributes of table tag, most of important attributes are provided in this session. And their definition or say description is given with them.
  7. Only two main attributes are not there that are rowspan and colspan. We will describe them in next session deeply. Because these are important then these attributes.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with help of this article you are able to understand attributes of anchor tag. I hope this tutorial on table tag attributes in HTML helps you.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪