How to Handle Table Height & Width From CSS & HTML

CSS, which stands for cascading style sheets, is a set of codes that specifies how a Web page is laid out. HTML tags, which are generally meant for underlying structure rather than layout and appearance, can still perform many of the same effects as CSS, including setting the width and height of tables. There are several approaches you can take to size tables on Web pages because more than one factor affects table size. One such factor is any element next to a table. Understanding how to set table size in Web pages allows you to create pages that meet your design needs.

Instructions

1

Open Notepad or other plain-text editor of your choice. Paste into it the following HTML document. The codes in this document tell your browser to display a blank Web page. You'll next add HTML tags to define a table.

2

Paste the following HTML tags after the opening tag you pasted in the last step. These tags tell your browser to create a table whose cells and outline have a border so you can see the table. The table's height and width are automatically sized to accommodate the size of the text in the cell.

Greetings.

3

Save the document, being sure to add the text ".htm" at the end of the file name, and to click "Any" for the file type.

4

Select the "Greetings" text, then type over it the following replacement text. The HTML "font" tag tells the browser to increase the size of the text that follows the tag to 24 points. By increasing the text size, the table will also expand in width and length to fit the larger text.

Greetings.

5

Press "Control" and "S" simultaneously to re-save your document, then press "F5" in your browser to reload the page. Notice that the table's dimensions have expanded to make room for the larger text. This effect verifies that one way to increase table size is by using HTML to change the text size within the table.

6

Paste the following tag between the "" and "" tags of the document in Notepad. The "style" tag invokes your browser's CSS interpreter, which reads the "table" entry that follows as an instruction to change the size of all tables in the Web page.

7

Resave and refresh the Web page in the browser as you did earlier. Notice that the table has grown to several times its original size. The CSS code you just added is responsible for this change.