Defining Table Width & Height
Print This Post
No CommentRelated Reading |
Next in our free online web design course, we’re going to learn how to define the “width” and “height” of our table. These two attributes can be defined in two ways: either as a fixed length (i.e. width=”360″) or a percentage (i.e. width=”80%”). When you define your width as a percentage, your table will expand or impend depending on the total width/height of your browser window and your screen resolution. Therefore it is much more sound to use a percentage to define the width/height of your tables.
Copy and paste the HTML code below to create a two tables – one with a fixed width (900 pixels) and the other with a percentage width (90%):
| <html> <head> </head> <table border=”1″ width=”900″> <tr> <br><br> <table border=”1″ width=”90%”> <tr> </body> |
If you save this HTML code and open it as an HTML page, you’ll get a page with two tables. The first one will remain fixed however you resize your browser window, but the other one will adjust itself to fit the 90% of the total width of the resized window. Note that the “height” attribute acts in the same manner as the “width” attribute.
Defining The Size Of HTML Table Cells
You can also set the width and height of each individual cell by using the “width” and “height” attributes along with the <td> tag:
| <html> <head> </head> <table border=”1″> </body> |
Our output will be:
|
Notice that the height of the whole row has been defined by adding a height value to only one of the <td> tags. You do not need to define the “height” attribute in each column – only one will suffice. Same with the “width” attribute and rows.
If you enjoyed this lesson, please link to it 
We’re through with the “width” and “height” attributes. In the next lesson of our online web design course, we’re going to learn how to “merge” table cells.
Loading ...
Popular Tags