☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Aligning a Table and Cell Content

22-01-18 Course- HTML5-Simple

You can provide the alignment to the table y using the align attribute in the <table> tag. A table contains cell that can also be aligned with the use of align attribute. Therefore, to apply the alignment to the cell content, you need to specify the align attribute with its value inside the <th> or <td> tag.

In this section, you learn to align a table in a Web page. In addition to this, you also learn to align the content in a cell.

Aligning a Table in a Web Page

Table alignment can be done in one of the three different ways: left, right, or center. By default, the table is aligned left in a Web page.

Let’s do the following steps to align a table in a Web page:

<!DOCTYPE html>
<head>
    <title>Aligning a Table in a Web Page</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th>Name</th>
    <th>Date of Birth</th>
    <th>Address</th>
</tr>
    <tr>
        <td>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

Save the document with the name AlignTable.html and open in browser.

Aligning the Cell Content

Similar to a table, you can also align the cell content in one of the three different ways: left, right, or center, by default, the cell content in a table is aligned left.

Let’s do the following steps to align the cell content:

<!DOCTYPE html>
<head>
    <title>Aligning content in a Table</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th>Name</th>
    <th>Date of Birth</th>
    <th>Address</th>
</tr>
    <tr>
        <td align=”center”>Manish Kumar</td>
        <td> 15-03-1983</td>
        <td align=”center”>Flat No, 303, Shipra Suncity, Ghaziabad</td>
    </tr>
    <tr>
        <td align=”center”>Rajesh Gupta </td>
        <td>22-02-1984</td>
        <td align=”center”> H. No.-32, Rajendra Place, New Delhi</td>
    </tr>
    <tr>
        <td align=”center”>Manisha Dubey </td>
        <td>05-02-1995</td>
        <td align=”center”> H. No.-125, Patel Nagar, New Delhi</td>
    </tr>
</table>
</body>
</html>

align content in table in HTML 5

Save the document with the name AlignContent.html. Open the document on browser.

PRV MENU NEXT