Table Width and Alignment - HTML

Typically, an HTML table expands to accommodate the contents of its cells. For example, consider the following code and the resulting tables

HTML tables expand to accommodate their content.

HTML tables expand to accommodate their content.

Once a table expands to the limits of its container object—whether the browser window, another table, or sized frame—the contents of the cells will wrap. Sometimes you will want to manually size a table, either to fill a larger space or to constrain the table’s size. Using the width attribute in the <table> tag you can set a table’s size by specifying the table width in pixels or a percentage of the containing object.

For example, if you specify “50%” as in the following code, the table’s width will be 50% of the containing object.

Cell contents wrap if a table cannot expand any further.

Cell contents wrap if a table cannot expand any further.
A 50% width table occupies 50% of the available width.

A 50% width table occupies 50% of the available width.

Note: Besides specifying the width of the full table, you can also specify the width of each column within the table, using width attributes in <th> and <td> tags, or specifying width within <col> or <colgroup> tags. These techniques are covered in the “Cells” and “Grouping Columns” sections later in this chapter.

Using a percentage in the width attribute allows the table to size itself dynamically to the size of its container. For example, if a table is set to 50%, the table will display as 50% of the browser window, whatever size the window happens to be. If you need to specify the exact width of a table, you should specify the width of the table in pixels instead. For example, if you need a table to be 400 pixels wide, you would specify the table with the following tag:

<table width=“400px”>

However, what happens if the specified width exceeds the table’s container object? If the container is scroll-bar enabled (like a browser window), horizontal scroll bars will appear to allow the user to scroll the entire table..

Note: If the table’s specified width exceeds the container’s width, and the container is not scrollbar enabled, it is up to the browser to handle the table. Most browsers will resize the table to fit the width of its container. The <table> tag also supports the align attribute, which controls where the table is positioned in the containing element. The align attribute supports left, right, and center values—the table’s position is appropriately adjusted by the setting of this attribute. Note that this attribute has no visible effect on a table that occupies the full width of its container object.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics