The need to stretch the table to the entire space of the browser window arises, for example, when the page design is placed inside the table. The solution to this problem does not require writing complex code, but it involves taking into account some of the features of the markup of web pages.
Necessary
Basic knowledge of HTML
Instructions
Step 1
First, you need to clarify the meaning of the upcoming operation. In HTML code, table pages are a set of nested paired tags (one opening and one closing). Cell tags (
) are nested within string tags (
), and those, in turn, into table tags (
). In the opening tag of the table, you can set its width and height both in absolute units (pixels) and relative (percentages). With relative sizes, the width and height of the parent element of the table are taken as 100%. If you place a table directly in the body of the page (and not in a layer, form, another table, etc.), then the dimensions of its parent element will be the width and height of the page. This means that in order to stretch the table to all the free space, you need to specify 100% horizontal and vertical dimensions for it.
Step 2
Now you can start putting this into practice in HTML. The width and height of the table is specified by the width and height attributes. So the table code indicating 100% of the dimensions in all directions and, for example, with two cells in one row, may look like this:
| left cell of the table | right cell of the table |
Step 3
Specifying 100% width and height will be enough to stretch the table if you choose the right HTML standard by which the browser should read the page code. The corresponding tag is placed on the very first line of the document. You need a tag with the following content:
Step 4
And one more point should be taken into account in your code: by default, the page is indented from the edges of the window by a few pixels, so the table, even after filling the entire page, will not stretch to the entire window. To eliminate these unnecessary fields, you can specify zero indents in the corresponding attributes in the opening tag of the page body ():
Step 5
When assembled, the entire page code with a table stretched to the full width and height of the screen will look like this:
Stretched table
| left cell of the table | right cell of the table |
