Приглашаем посетить
Хомяков (homyakov.lit-info.ru)

Controlling the Size of Tables

Previous Page
Table of Contents
Next Page

Controlling the Size of Tables

Ordinarily, the size of a table and its individual cells automatically expand to fit the data you place into it. However, you can choose to control the exact size of the entire table by putting width and/or height styles in the <table> tag. You can also control the size of each cell by putting width and height styles in the individual <td> tags. The width and height styles can be specified as either pixels or percentages. For example, the following code creates a table 500 pixels wide and 400 pixels high:

<table style="width:500px; height:400px">

By the Way

There are actually width and height attributes that were deprecated in the move to XHTML. They still work in web browsers but you should focus on using the width and height style properties instead, because they represent the appropriate approach to use in XHTML.


To make the first cell of the table 20% of the total table width and the second cell 80% of the table width, you would type the following:

<table style="width:100%">
  <tr>
    <td style="width:20%">skinny cell</td>
    <td style="width:80%">fat cell</td>
  </tr>
</table>

Notice that the table is sized to 100%, which makes sure that the table fills the entire width of the browser window. When you use percentages instead of fixed pixel sizes, the table will resize automatically to fit any size browser window, while maintaining the aesthetic balance you're after. In this case, the two cells within the table are automatically resized to 20% and 80% of the total table width, respectively.


Previous Page
Table of Contents
Next Page