Let's create a Web page named fixedlayouttable.html to set the fixed layout for a table.
<!doctype html>
<head>
<title>Fixed table Layout </title>
<style type="text/css">
.flayout{table-layout:fixed;}
.f1{width:200px;}
.f2{width:50px;}
.f3{width:400px;}
</style>
</head>
<body><h1>Working with fixed table layout </h1>
<table border=1 class="flayout"> <tr>
<td class="f1">col 1</td>
<td class="f2">col 2</td>
<td class="f3">col 3</td>
</tr>
<tr>
<td>This column is 200px wide.</td>
<td>This column is 50px wide.</td>
<td>This column is 400px wide.</td>
</tr>
</table>
</body>
</html>
The table-layout property is set to the value fixed indicating that the table layout is a fixed table layout.
The output of the above Webpage:
<!doctype html>
<head>
<title>Fixed table Layout </title>
<style type="text/css">
.flayout{table-layout:fixed;}
.f1{width:200px;}
.f2{width:50px;}
.f3{width:400px;}
</style>
</head>
<body><h1>Working with fixed table layout </h1>
<table border=1 class="flayout"> <tr>
<td class="f1">col 1</td>
<td class="f2">col 2</td>
<td class="f3">col 3</td>
</tr>
<tr>
<td>This column is 200px wide.</td>
<td>This column is 50px wide.</td>
<td>This column is 400px wide.</td>
</tr>
</table>
</body>
</html>
The table-layout property is set to the value fixed indicating that the table layout is a fixed table layout.
The output of the above Webpage:
No comments:
Post a Comment