Open In App

Design a table using table tag and its attributes

Last Updated : 14 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will create a table using HTML. To create this table, we must know the tags required to create the table. At first, we will create the structure of the table and we will use attributes to design the table.

Approach: To create the table we have to use the <table> tag and we will use attributes of the <table> tag to design the table. The attributes that we will use to design the table are: cellspacing, cellpadding, border, bg color, etc.

Example:




<!DOCTYPE html>
<html>
  
<body bgcolor="pink">
    <table bgcolor="silver" align="center" 
        border="5" cellspacing="5" 
        cellpadding="5">
          
        <tr bgcolor="purple">
            <caption align="top">
                <h2 style="color: #ff3300;">
                    Train
                </h2>
            </caption>
  
            <th bgcolor="magenta">train number</th>
            <th bgcolor="magenta">departure</th>
            <th bgcolor="magenta">arrival</th>
            <th bgcolor="magenta">category</th>
        </tr>
        <tr>
            <td>12267</td>
            <td>23:25</td>
            <td>05:15</td>
            <td>duronto</td>
        </tr>
        <tr>
            <td>12426</td>
            <td>19:40</td>
            <td>05:05</td>
            <td>rajdhani</td>
        </tr>
        <tr>
            <td>12019</td>
            <td>06:05</td>
            <td>13:15</td>
            <td>shatabdi express</td>
        </tr>
    </table>
</body>
  
</html>


Output:

So using the attributes of the table tag, we can design the table.



Similar Reads

What are defer and async attributes in &lt;script&gt; tag ?
In this article, we will learn about the defer and async attributes in &lt;script&gt; tag. In your webpage, two things are happening in your browser: HTML ParsingLoading of the scriptsSuppose the browser is loading your webpage, At that time, your browser is parsing the HTML document line by line and suddenly it encounters a script tag. Then the br
3 min read
How create table without using &lt;table&gt; tag ?
HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the &lt;table&gt; tag. However, tables can also be created in HTML without using &lt;table&gt; tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding style (e.g. fonts, colors, padding, and other decor
3 min read
Difference between &lt;article&gt; tag and &lt;section&gt; tag
Both the tags are semantics tag in HTML 5. In this article, we will discuss the behavior of the &lt;article&gt; and &lt;section&gt; tag. Both the &lt;article&gt; and &lt;section&gt; tags are represented in a similar way but used for some meaning, that meaning is for the browsers and the developers. Both tags can replace each other as there will be
4 min read
Explain the difference between head Tag and header Tag in HTML5 ?
The &lt;head&gt; element is a container for metadata and is placed between the &lt;html&gt; and &lt;body&gt; tags. The &lt;header&gt; is for the main content section's introductory elements, like headings or logos and it mainly focuses on what appears at the top of the webpage. &lt;head&gt; ElementThe &lt;head&gt; element is part of the HTML docume
1 min read
What is the difference between the &lt;br&gt; Tag and the &lt;p&gt; Tag ?
The &lt;br&gt; tag is used to insert a line break, creating a new line within text or content. It doesn't have a closing tag and is a self-closing tag. On the other hand, the &lt;p&gt; tag defines a paragraph, separating blocks of text. It has an opening &lt;p&gt; and a closing &lt;/p&gt; tag, allowing for the structured organization of text into p
2 min read
Which tag is used to represent progress of a task in HTML & how is it different from &lt;meter&gt; tag ?
In this article, we will see which tag is used to represent the progress of a task in HTML. To represent the progress of a task, we will use the &lt;progress&gt; tag. This tag is used to represent the progress of a task. It is also defined how much work is done and how much is left. Syntax: &lt;progress attributes...&gt; &lt;/progress&gt; Attribute
2 min read
What purpose does a &lt;script&gt; tag serve inside of a &lt;noscript&gt; tag?
Usage of NoScript tag: The tag defines alternate content that will be displayed if the user has disabled script or browser does not support script. It can be used inside both &lt;head&gt; and &lt;body&gt; tag. Syntax: &lt;noscript&gt; Contents... &lt;/noscript&gt; Example: &lt;html&gt; &lt;head&gt; &lt;title&gt;wbr Tag&lt;/title&gt; &lt;style&gt; b
1 min read
Why &lt;big&gt; tag is not in HTML5 while &lt;small&gt; tag exists ?
The &lt;big&gt; tag was discontinued in HTML5 while &lt;small&gt; tag is still in handy because &lt;small&gt; tag is frequently used to represent small prints like footnotes, copyright notices, comments etc. Many alternatives for &lt;big&gt; tag are already available such as &lt;h1&gt;, &lt;h2&gt; and so on. In HTML5 instead of using &lt;big&gt;, y
2 min read
Is container tag same as the empty tag in HTML? If not, why ?
In this article, we will see the container tag &amp; empty tag in HTML, along with knowing how they're different from each other. The Container tag is not the same as the empty tag &amp; these are two different categories of tags used in HTML. Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed in the b
5 min read
Using Git Attributes for Keyword Expansion and Substitution
Git attributes provide a powerful way to specify how certain files should be treated by Git. Among the many possible uses, one particularly useful application is keyword expansion and substitution. This feature allows developers to automatically replace specific keywords within files with corresponding values, making it handy for managing version i
3 min read
Article Tags :