Help:Wiki University Wikitext--Tables - Scrolling

From FamilySearch Wiki
Revision as of 22:16, 15 November 2015 by Psleavens (talk | contribs) (→‎Try these out: Minor grammar change)
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps


<< Previous Chapter Next Chapter >>

Table scrolling[edit | edit source]

Look at the extreme right edge of this page. Do you see a vertical scroll bar? The vertical scroll bar enables you to scroll the content this page up or down.

Occasionally you may want to insert a very large table that may be too long or too wide or both to see all of it on a page. To make these large tables useful you can create scroll bars which behave just like the one you see on this page.


Scrolling bars[edit | edit source]

Let pretend that our demonstration table is 900 pixels wide. Here's what it looks like:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE the table expanse way beyond the right edge of the page.

Horizontal scroll bars[edit | edit source]

  • First step is to encase the table between opening and closing div tags:
<div>
{| style="border:1px solid red; width:900px"
|-
| Apples
| Peas .
.
.
.
|}
</div>
  • Next we add the overflow:scroll" attribute to the beginning div tag.
<div style="overflow:scroll">

  • However since the table is so wide, we need to limit the table to the size we want it. Here we add a width attribute, in addition:


Let's add the scrolling and width attribute to the beginning div tag. We will limit the width of the table to 400 pixels: Here is the coding:

<div style="overflow:scroll; width:400px"
{| style="border:1px solid red"
|-
.
.
.
</div>


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


  • NOTICE the scroll bar on the bottom and a place for a vertical scroll bar.


Vertical scroll bar[edit | edit source]

To add a vertical scroll bar for very tall tables, just add the height attribute to the beginning div tag:

<div style="overflow:scroll; width:400px: height:100px">
{| style="border:1px solid red; "
|-
.
.
.
</div>


Here is the table with both horizontal and vertical scroll bars:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


  • NOTICE we now have active scroll bars horizontally and vertically.

  • Our table is small so the example is not a good one, but you get the idea. On a large table, the scroll bars are a great help.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Take our demonstration table and make it 900 pixels wide and tall.
  • Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.


Quick Quiz
  • When creating the horizontal scroll bar, you do not have to set the width.
A. True
B. False
  • Vertical scroll bars are only useful for very tall tables.
A. True
B. False
  • You cannot have horizontal and vertical scroll bars at the same time.
A. True
B. False