Certified HTML5 Developer | Table Height and Width

Learning Resources
 

Table Height and Width


In HTML5, tables are used to display data in rows and columns, and controlling the height and width of tables or table elements is essential for proper layout. This tutorial covers how to define the height and width for tables, rows, columns, and cells.


1. Setting the Width of a Table

The width of a table in HTML can be set using the width attribute, CSS width property, or by setting the width of individual columns.

Example 1: Using the width Attribute in HTML

<table width="600">
<tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

This sets the width of the entire table to 600 pixels.

Example 2: Using CSS for Table Width

<style>
table { width: 80%; } </style> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

This sets the table's width to 80% of its parent container's width.


2. Setting the Width of Table Columns

The width of individual columns in a table can be controlled using the <col> element or by specifying the width attribute inside the <td> or <th> tags.

Example 3: Using the <col> Element to Set Column Width

<table>
<colgroup> <col style="width: 200px"> <col style="width: 300px"> </colgroup> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

Here, the first column is set to a width of 200px, and the second column is set to 300px.

Example 4: Using Inline CSS to Set Column Width

<table>
<tr> <td style="width: 200px;">Cell 1</td> <td style="width: 300px;">Cell 2</td> </tr> </table>

In this example, inline CSS is used to set the column widths for individual table cells.


3. Setting the Height of a Table

You can control the height of a table using the CSS height property, but keep in mind that it only applies to the entire table and not its rows or cells unless specified.

Example 5: Using CSS for Table Height

<style>
table { height: 200px; } </style> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

This sets the height of the table to 200px.


4. Setting the Height of Table Rows

You can also define the height of individual table rows using the CSS height property on the <tr> element.

Example 6: Using CSS for Row Height

<style>
tr { height: 50px; } </style> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

This sets all rows in the table to a height of 50px.


5. Setting the Height of Table Cells

Similarly, individual cells can have their height controlled using the height CSS property.

Example 7: Using CSS for Cell Height

<table>
<tr> <td style="height: 100px;">Cell 1</td> <td style="height: 100px;">Cell 2</td> </tr> </table>

This sets the height of each cell to 100px.


6. Tips and Best Practices

  • Table Layout: If you want more control over column width distribution, consider using table-layout: fixed; CSS property. This ensures that columns maintain the set width even if content overflows.
<style>
table { table-layout: fixed; width: 100%; } </style>
  • Cell Padding: Ensure there is enough padding in the cells to make the content legible and visually appealing. Use padding CSS property to adjust spacing inside the cells.
<td style="padding: 10px;">Content</td>


By combining HTML and CSS, you can easily control the height and width of tables, rows, and cells, ensuring that the layout is clean, functional, and visually appealing. Always remember to test your table layouts on different screen sizes and devices to ensure responsiveness and readability.

 For Support