Help:Wiki University HTML-- Tables - Scrolling

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

TABLE SCROLLING

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

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

  • First step is to encase the table between opening closing div tags:
<div>
<table style="border:1px solid red; width:900px">

<td>Apples</td>

<td>Peas</td>
.
.
.
</table>
</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"
<table 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

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">
<table 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 . . . . .

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

Navigation menu