The HyperText Markup Language (HyperText Markup Language) instructions that form tables in web pages provide a fairly large number of additional parameters. This allows, unlike other block elements, to set sizes not only using the CSS language (Cascading Style Sheets or "Cascading Style Sheets"), but also using the HTML itself.
Instructions
Step 1
Use the width attribute of the table tag to specify the width of the table in pixels. The tag (HTML instruction) table consists of an opening (
) parts, between which there are tags that form the rows and cells of the table. Additional parameters (attributes) can be placed in the opening tag, the list of which for each specific tag is determined by international standards. For the table tag, these standards allow the use of the width attribute, which specifies the width of the table in pixels. The HTML code of a simple table with such a tag defining a width of 500 pixels can look like this:
| 1st cell | 2nd cell |
Step 2
Add a% character to the value of the width attribute if you need to specify the width of the table as a percentage rather than in pixels:
| 1st cell | 2nd cell |
Please note that these percentages will not necessarily be based on the width of the browser window. The structure of the document matters here - just as a nested nesting doll cannot be wider than the one in which it is nested, so 100% of the table's width cannot be greater than the width of the parent element. For example, if the table is inside a div block, then the width of this block will be taken as 100%.
Step 3
Use the style description language instructions if you want to set the same width for the tables in the web page in one place in the source code. To do this, first place in the head part of the HTML code (between and) the opening and closing tags that limit the CSS language statements:
/ * CSS instructions will be here * /
Then put the following CSS between those tags: table {width: 100px;} Here, table indicates that the description placed inside the curly braces should be applied to all table tags that appear in the page code. Well, the width parameter sets the width. Here, too, you can use the relative width as a percentage.
Step 4
Specify the class name in the CSS code and in the HTML table tag if you need to specify the width not for all tables, but only for one or several. For example, let's say the class that marks a group of narrow tables is tiny. Then the description of its style might look like this: table.tiny {width: 100px;} And the corresponding tag of one of the tables in the HTML code is like this:
| 1st cell | 2nd cell |
