To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Widths

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


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
Oranges Beans Almonds Buckwheat
  • You will notice that the width is being controlled by the size 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.

Html7.jpg

The width of a table or cell can be set with either percentages or a fixed amount in pixels. Whenever possible use percentages instead of fixed amounts. That way the table will look proportional to the page if it widens.

  • We only need to add the width attribute to our opening table tag:
{| 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
Oranges Beans Almonds Buckwheat

Cell and column width[edit | edit source]

  • The width of the cells is controlled by the text in the cells. Applying 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 will adjust smaller in size to maintain the over all width of the table and might be much smaller in width than in our example.
  • To add some control over the width of cells or actually the columns, we need to install the width attribute in the top cells in each column as the top cells will influence the total column width and there is no need to enter the width to each cell.
  • 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
Oranges Beans Almonds Buckwheat


Here's the coding:

{| style="border:1px solid red"
|-
| style="border:1px solid red; width:25%" | Apples
| style="border:1px solid red; width:25%" | Peas
| style="border:1px solid red; width:25%" | Peanuts
| style="border:1px solid red; width:25%" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Oranges
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
| style="border:1px solid red" | Buckwheat
|}


  • 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[edit | edit source]

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[edit | edit source]

Tests.gif
Exercises
  • Copy the table coding displayed directly above to your sandbox, then modify it to display 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.


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 set the width of a table in percentages only
A. True
B. False