Implementing Tables in HTML

Previously we have seen, Implementing Frames in HTML Web-pages. Now we are going to learn about Implementing Tables in HTML Web-pages. So let's get started...

Table in HTML

Tables are used to show the data in tabular format i.e. data that is systematically represented in rows and columns. In HTML, the table is represented with the <table> tag.

Each table row is defined with the <tr> tag. A table heading is defined with the <th> tag. By default, the heading of the table is bold and it has a center alignment. A table data/cell is defined with the <td> tag.

Table Tags in HTML

Tags	Description
<table>	Indicates the Table. The tag surround the entire table.
<tr>	It defines table Row. The tag surround the entire Row.
<td>	It defines table Column. The tag surround the entire Column.
<th>	This tag is used to define the Heading of the table.

Attributes of Table Tags

1. BORDER="n"

It draws a border around the cells in the number of pixels.

2. CELLSPACING="n"

Inserts spaces between table cells in the number of pixels(n).

3. CELLPADDING="n"

Adds a number of pixel spaces between the text and the cell walls.

4. WIDTH="n"

Changes the width of the table or cell based on the number of pixels(n).

5. ALIGN="left/right/center"

Defines the alignment of the Content on the Table.

Basic Table Implementation

Example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Student Marks Table</title>
    </head>
    <body>
        <h2> Student Marks Data</h2>
        <br>
        <table class="tbl" border="3px" width="70%" cellpadding="10px" cellspacing="5px">
            <tbody align="center">
                <tr>
                    <th>Sr. No.</th>    
                    <th>Student Name</th>   
                    <th>Marks</th>  
                </tr>
                <tr>
                    <td>1</td>  
                    <td>Rohan</td>  
                    <td>92 %</td>
                </tr>
                <tr>
                    <td>2</td>  
                    <td>Aayan</td>  
                    <td>96 %</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Output :

So, now it's time to end the session. See you guys Next Time, stay tuned for further updates on HTML Programming Languages...!!!

I hope, our website will definitely help you to improve your Programming Skills and Knowledge.

Thanks for Visiting...!!!

Also Visit

Tags:

html

Posted by: Mr. Rohan Kumar Bhoi

Hello Everyone, Currently, I’m working as the Founder and CEO of Computer Tips Tricks.tech I have an approach to making our generation more intelligent in IT Field. To make it possible, me and my team are working on this website daily. We have to develop our generation and be self-dependent. " Do something different than others, be professional, and Develop yourself ! "

Latest posts

Implementing Tables in HTML | Different Table Tags in HTML