Help:Wiki University HTML-- Tables - Widths
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Comments
- Paragraphs
- Fonts - Changing
- Font Size
- Font Colors
- Font Bold-Italics
- Padding
- Margins
- Borders
- Width and Height
- Alignment
- Tables
- Tables - Borders
- Tables - Widths
- Tables - Captions
- Tables - Col Labels
- Tables - Cells
- Tables - Rows
- Tables - Placement
- Tables - Sorting
- Tables - Scrolling
- Tables - Col Only
- Tables - Col Spans
- Tables - Row Spans
- Infobox - Creating
- Infobox - Placing
- Infobox - If function
- Sidebars
- Navboxes
- Position - Relative
- Position - Absolute
- Misc
Flexbox/CSS Grid
Additional Helps
TABLE WIDTH[edit | edit source]
This is our table from the last chapter:
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Orange | Beans | Alminds | Buckwheat |
- PLEASE NOTE: The width is being controlled by the size of the font and amount of text in the cells
- What if you want the table to be as wide as the page, here we use our width attribute.
- Let's say we want it to cover the entire width or 100% of the page.
The width of a table or cell can be set with either percentages or a fixed amount in pixels. A table can be, for example, 50% of the page width or 320 pixels. |
- We only need to add the width attribute to our opening table tag:
- PLEASE NOTICE the semi-colon that separates the border attribute from the width attribute. Remember we always use semi-colons to separate attributes.
Here is our little table with the width attribute installed:
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Orange | Beans | Alminds | Buckwheat |
CELL AND COLUMN WIDTH[edit | edit source]
- The width of the cells is controlled by the text or the amount of text in the cells. The width attribute for the entire table does not make the cells equal in width. If one cell had a large amount of text in it, the other cells might be much smaller in width then in our example.
- To control the width of cells or actually the columns, we need to install the width attribute in the top cells in each column. If you are wondering why not in all cells like the border attribute, it is because the top cells seem to be able to influence the cells under it.
- Let's make our table so each of the cells is 25% of the entire width of the table in other words make all the columns the same width.
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Orange | Beans | Almonds | Buckwheat |
Here's the coding:
<table style="border:1px solid red">
<tr>
<td style="border:1px solid red; width:25%">Apples</td>
<td style="border:1px solid red; width:25%">Peas</td>
<td style="border:1px solid red; width:25%">Peanuts</td>
<td style="border:1px solid red; width:25%">Wheat</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Corn</td>
<td style="border:1px solid red">Cashews</td>
<td style="border:1px solid red">Barley</td>
</tr>
<tr>
<td style="border:1px solid red">Oranges</td>
<td style="border:1px solid red">Beans</td>
<td style="border:1px solid red">Almonds</td>
<td style="border:1px solid red">Buckwheat</td>
</tr>
</table>
- AGAIN NOTICE we are determining the width of the columns not just the width of the top row of cells.
- NOTICE the width attribute is separated from the border attribute by a semi-colon.
WIDTH ATTRIBUTES FOR PADS AND SMART PHONES
TRY THESE OUT . . . . .[edit | edit source]
- With our above table place a green border, "inset" style and 25 pixels wide.
- Make the table 90% in width.
- Next place a 1 pixel green border around the cells in the first row.
- Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.
- Putting the width in the first cell of a row determines the width of the first column in the table
- A. True
- B. False
- The width of a table will be determined by the material in the cells, if you do not set the widths
- A. True
- B. False
- You can only set the width of a table in percentages.
- A. True
- B. False