Help:Wiki University HTML-- Tables - Widths

MAIN PAGE

WIKI

WIKITEXT

HTML/CSS

FAMILY HISTORY CENTERS

VISUAL EDITOR

Lessons

1. HOME
2. Introduction
3. Headers
4. Lists
5. Nesting Lists
6. Comments
7. Paragraphs
8. Fonts - Changing
9. Font Size
10. Font Colors
11. Font Bold-Italics
12. Padding
13. Margins
14. Borders
15. Width and Height
16. Alignment
17. Tables
18. Tables - Borders
19. Tables - Widths
20. Tables - Captions
21. Tables - Col Labels
22. Tables - Cells
23. Tables - Rows
24. Tables - Placement
25. Tables - Sorting
26. Tables - Scrolling
27. Tables - Col Only
28. Tables - Col Spans
29. Tables - Row Spans
30. Infobox - Creating
31. Infobox - Placing
32. Infobox - If function
33. Sidebars
34. Navboxes
35. Position - Relative
36. Position - Absolute
37. Misc

---

Flexbox/CSS Grid

1. Flexbox Training

Additional Helps

• Common Wiki Fixes
• Wiki Tips
• Wiki Support Reading List

<< Previous Chapter

Next Chapter >>

TABLE WIDTH

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:

<table style="border:1px solid red; width:100%"

• 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

• 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

With the world using far more pads and smart phones to access the internet, we need to be careful how our pages look on these smaller view ports. In areas of the world, where there are few desktop computers, the FamilySearch Wiki is probably being seen on these devises more so than on computer monitors. This means we now should be careful about using the width attribute. It might be well to limit or even eliminate the placing of widths on tables. We suggest that you check your edits on these smaller view ports to make sure they fit so that there will be no need for a horizontal scrolling.

TRY THESE OUT . . . . .

Exercises

• 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.

Check your answers

Quick Quiz

• 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

Check your answers

<< Previous Chapter

Next Chapter >>