Scribd
Upload
10 views6 pages

HTML Table-3 (Sizes)

HTML Table-3 ( Sizes)

Uploaded by

thandarkyaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

HTML Table-3 (Sizes)

HTML Table-3 ( Sizes)

Uploaded by

thandarkyaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row
or column.

HTML Table Width


To set the width of a table, add the style attribute to the <table> element:

Example 1
Set the width of the table to 100%:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

border-collapse: collapse;

</style>

<body>

<h2>100% wide HTML Table</h2>

<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>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

HTML Table Column Width


To set the size of a specific column, add the style attribute on a <th> or <td> element:

Example 3
Set the width of the first column to 70%:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

border-collapse: collapse;

</style>

<body>

<h2>Set the first column to 70% of the table width</h2>

<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>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

HTML Table Row Height


To set the height of a specific row, add the style attribute on a table row element:

Example 3
Set the height of the second row to 200 pixels:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

border-collapse: collapse;

</style>

<body>
<h2>Set the height of the second row to 200 pixels</h2>

<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>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

You might also like