Help:Wiki University HTML-- Tables - Widths





<< Previous Chapter Next Chapter >>

TABLE WIDTH
This is our table from the last chapter:  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.
 * 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.
 * We only need to add the width attribute to our opening table tag:
 * 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.

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