ptg16476052252 LESSON 10: Building Tables
Setting Table Widths
Tables determine widths differently than other elements in HTML. Rather than each ele-
ment taking up the full width of its container element, table elements only take up the
width their content uses, up to the full width of the container. This is very useful when
you’re working with CSS designs. You can set elements to display: table;, and they
will act more like a table cell, taking up only the space the content takes up.
But when working with actual tables, sometimes you might want more control over how
wide your tables and columns are, particularly if the defaults the content provides are
really strange. In this section, you’ll learn how to change the width of your tables and
columns.
The easiest way is to use the width property on the table itself. This defines how wide
the table will be on the page. The width property can have a value that is either the exact
width of the table (in pixels) or a percentage (such as 50% or 75%) of the current con-
tainer width, which can therefore change if the window or container element is resized.
You can also set the width property on your table cells, defining the width of each
column.
To make a table as wide as the browser window, you add the width property to the table,
as shown in the following line of code:Input ▼
<table border="1" style="width: 100%;">Figure 10.6 shows the result.Output ▼
FIGURE 10.6
A table set to
100% width.