how to set table size in css

najeeb · 05-28-2010, 12:04 PM

i need to know how to set table size using css code.

Major Payne · 05-29-2010, 09:05 AM

Better if you posted the code you have so far. For one table:

table {
width: XXpx;
height: YYpx; /* optional */
margin: 0 auto; /* centers */
}

If you have more than one table tag, then you will need selector names as ids or classes.

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/co...-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

mbaker · 05-29-2010, 09:20 AM

Replace height and width attributes with CSS height and width properties.

For example replace height="23" width="45" with style="height:23px; width:45px;"

Here is an example that illustrates height and width attributes being replaced with inline styles and with CSS classes.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>CSS Table Size</title>
<style type="text/css">
table.mood   { width:600px; }
th.mood      { height:30px; }
td.sad       { height:20px; }
td.happy     { height:35px; }
td.exuberant { height:50px; }
</style>
</head>
<body>
<h1>CSS Table Size</h1>
<p>A demo of setting table size with attributes and with CSS.</p>
<table border="1" width="600">
<caption>Size set with attributes</caption>
<tr><th height="30">Day</th><th>Mood</th></tr>
<tr><td height="20">Yesterday</td><td>Sad</td></tr>
<tr><td height="35">Today</td><td>Happy</td></tr>
<tr><td height="50">Tomorrow</td><td>Exuberant</td></tr>
</table>
<br>
<table border="1" style="width:600px;">
<caption>Size set with inline CSS</caption>
<tr><th style="height:30px;">Day</th><th>Mood</th></tr>
<tr><td style="height:20px;">Yesterday</td><td>Sad</td></tr>
<tr><td style="height:35px;">Today</td><td>Happy</td></tr>
<tr><td style="height:50px;">Tomorrow</td><td>Exuberant</td></tr>
</table>
<br>
<table border="1" class="mood">
<caption>Size set with CSS classes</caption>
<tr><th class="mood">Day</th><th>Mood</th></tr>
<tr><td class="sad">Yesterday</td><td>Sad</td></tr>
<tr><td class="happy">Today</td><td>Happy</td></tr>
<tr><td class="exuberant">Tomorrow</td><td>Exuberant</td></tr>
</table>

</body>
</html>