The table-layout property determines how a table is rendered in a web page. Let's create a Web pages named autolayouttable.html which shows the code to display automatic table layout.
<!doctype html>
<head>
<title>Auto table Layout </title>
<style type="text/css">
.alayout{table-layout:auto;
}
</style>
</head>
<body>
<h1>Working with Auto Table layout</h1>
<table border=1 class="alayout">
<tr>
<td class="a1">col 1</td>
<td class="a2">col 2</td>
<td class="a3">col 3</td>
</tr>
<tr>
<td>hello hello hello hello hello hello hello hello hello hello hello hello hello hello </td>
<td>hello hello hello hello hello hello hello hello hello</td>
<td>hello hello hello hello hello </td>
</tr>
</table>
</body>
</html>
Here The table-layout property is set to the auto value indicating that the web browser determines the table layout according to the widest content in the cells of a table.
<!doctype html>
<head>
<title>Auto table Layout </title>
<style type="text/css">
.alayout{table-layout:auto;
}
</style>
</head>
<body>
<h1>Working with Auto Table layout</h1>
<table border=1 class="alayout">
<tr>
<td class="a1">col 1</td>
<td class="a2">col 2</td>
<td class="a3">col 3</td>
</tr>
<tr>
<td>hello hello hello hello hello hello hello hello hello hello hello hello hello hello </td>
<td>hello hello hello hello hello hello hello hello hello</td>
<td>hello hello hello hello hello </td>
</tr>
</table>
</body>
</html>
Here The table-layout property is set to the auto value indicating that the web browser determines the table layout according to the widest content in the cells of a table.
No comments:
Post a Comment