HTML tables may vary in size for individual columns, rows, or the entire table.
Employ the style attribute along with the width or height properties to designate the dimensions of a table, row, or column.
To define the width of a table, apply the style attribute to the <table> element.
Example
Adjust the table width to 100%.
| <table style=”width:100%”> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> |
| Note: Utilizing a percentage as the size unit for width determines the width relative to its parent element, which here is the <body> element. |
To specify the size of a particular column, apply the style attribute to a <th> or <td> element.
Example
Adjust the width of the initial column to 70%.
| <table style=”width:100%”> <tr> <th style=”width:70%”>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> |
To define the height of a particular row, apply the style attribute to a table row element.
Example
Adjust the height of the second row to 200 pixels.
| <table style=”width:100%”> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr style=”height:200px”> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> |
