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

Setting the Width of a Table and Table Columns

22-01-18 Course- HTML5-Simple

Sometimes, a table with a large number of columns might not display the records clearly on a Web page. In such a situation, you can increase the table width such that each record is visible clearly on a web page. You can also decrease the table width according to your requirement.

Similarly, if your table columns contain large values and due to short size of columns, you cannot see the records clearly, then you can increase the width of those columns. You can also decrease the column width according to your requirement.

You can specify the width of both the table and the table columns using the width attribute of the <table>, <th>, and <td> tags.

In this section, you learn to set the width of a table and its columns.

Setting the Width of a Table

A table width can be expressed as an absolute value in pixels, or as a percentage of screen width. If you have a table of graphics, such as a navigation bar then define the width or the table in pixels. In case, you have a tab of text, such as student record then define the width of the table in percentage.

Let’s do the following steps to set the width of a table in percentage:


<!DOCTYPE html>
<head>
    <title>Setting the Width of a Table</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right” width=”95%”>
<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>

Save the document with the name TableWidth.html. Open the document on browser;

Setting the Width of Table Columns

A table column width can also be expressed as an absolute value in pixels, or as a percentage of screen width. If the cell has content or data as graphics, such as a navigation button, then define the column width in pixels. In case, you have cell content in the form of text, such as student name, then define the column width in percentage.

Let’s do the following steps to set the width of a table column in percentage;


<!DOCTYPE html>
<head>
    <title>Setting the Width of Table Columns</title>
</head>
<body bgcolor=”alicablue”>
<table border=”1” align=”right” width=”95%”>
<caption>
    <h2>Student Details</h2>
</caption
<tr>
    <th width=”20%”>Name</th>
    <th width=”20%”>Date of Birth</th>
    <th width=”60%”>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>

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

PRV MENU NEXT