Browsing Large HTML Tables
on Small Screens
Keishi Tajima†

Kaori Ohnishi‡† Kyoto University‡ Japan Advanced Institute of Science and Technology(Supported by IPA Exploratory Software Project)

ACM UIST’08 at Monterey, CA USA
22 Oct. 2008

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

What is the Problem?
Small screen size is a problem in mobile Web access. . .
When is screen size really a problem?
• text data (e.g., latest news)– sequential data → you can read by sequential scrolling– 2-dimensional page layout is the problem• maps, images– inherently 2-dimensional data
– one of the most diﬃcult data types on small screens• tables– also 2-dimensional– also one of the most diﬃcult types on small screensBrowsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University(a tray sheet, McDonald’s Company (Japan), Ltd.)

School of Informatics
Kyoto University

Browsing Large HTML Tables on Small Screens

What is the Problem?
Do we access tables from mobile phones so often?
⇓Yes• train timetables• movie schedules• stock markets..
• Many Web sites shows search results in tables.
Tables are important in mobile Web access.

School of Informatics
Kyoto University

Browsing Large HTML Tables on Small Screens

Goal of this ResearchTables are:• frequently accessed in mobile Web accesswhile• especially diﬃcult to browse on small screens⇓
We develop interaction techniques forbrowsing HTML tables on small screens.

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Basic Structure of Tables
Item
Cal Sugar Fat · · · Milk Wheat Egg√√
Hamburger
100
5.59 ··· √√√Cheeseburger 200
6.5 12 · · ·√Potato(S)230
0.0 11 · · · Potato(M)380
0.0 19 · · ·..
..
..
..
..
..
..
..
√√
Gigaburger
540
8.8 29 · · · • concisely represent two contexts of each cell by its
horizontal and vertical positions.
• “cal of Hamburger is 100, sugar of Hamburger is 5.5,
. . . , cal of Cheeseburger is 200, . . . ”

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Basic Structure of Tables
Item
Cal Sugar Fat · · · Milk Wheat Egg√√
Hamburger
250
5.5
9 ··· √√√
Cheeseburger 300
6.5 12 · · ·√Potato(S)230
0.0 11 · · · Potato(M)380
0.0 19 · · ·..
..
..
..
..
..
..
..
√√
Gigaburger
540
8.8 29 · · · attribute names: describe types of values in each column

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Basic Structure of Tables
Item
Cal Sugar Fat · · · Milk Wheat Egg√√
Hamburger
250
5.59 ··· √√√Cheeseburger 300
6.5 12 · · ·√Potato(S)230
0.0 11 · · · Potato(M)380
0.0 19 · · ·..
..
..
..
..
..
..
..
√√
Gigaburger
540
8.8 29 · · · attribute names: describe types of values in each column
key values:
have unique values that brieﬂy explain
the meaning of each row
We call them headers.

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Browsing Modes
We provide three browsing modes.
1. Normal Mode (default):• ordinary representation + various useful functions
2. Record Mode:• Show each row/column in a record-like format• When we randomly move around, we may get lost.
3. Cell Mode:• Show each cell together with its row/column
headers, so we never get lost.

School of Informatics
Kyoto University

Browsing Large HTML Tables on Small Screens

DEMOBrowsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Typical Tasks and Corresponding Operations
Read a cell at the intersection of a given row & column⇒ record mode or cell mode
Read cells in a given row (or column)⇒ record mode or cell mode
Read tables row by row (or column by column)⇒ record mode or cell mode
Randomly move and read cells at various positions⇒ cell mode
Compare two (or more) given rows (or columns)⇒ hiding unnecessary rows/columns in normal mode
Find where in the table a given value appears⇒ intra-page search and click the cell to see its headers innormal mode

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Technical Issues
We need to detect logical structure in tables.
1. Which cells are row/column headers?
(attribute names or key values)
2. Semantics of composite cells?
• In normal mode:
We need to know hierarchical attributes.
• In record/cell mode:
We decompose composite cells in accordance with
their semantics.

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Neighbors Sharing Same Values
ItemAllergen
Milk Wheat · · ·2.5 5.8 · · · ···2.5 6.0 · · · ···√2.5 6.0 · · · ···3.8 9.1 · · ·..
..
..
..
..
..
4.3 13.0 · · · ···Cal Sugar Fat · · ·Hamburger
150
Cheeseburger 160
Potato(S)160
Potato(M)250..
..
Gigaburger
280

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Neighbors Sharing Same Values
ItemAllergen
Milk Wheat · · ·2.5 5.8 · · · ···2.5 6.0 · · · ···√2.5 6.0 · · · ···√3.8 9.1 · · · ···
..
..
..
..
..
..
4.3 13.0 · · · ···Cal Sugar Fat · · ·Hamburger
150
Cheeseburger 160
Potato(S)160
Potato(M)250..
..
Gigaburger
280

Decompose and Copy the Contents

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Cells Representing Aggregation of Neighboring Cells
Number of Professors
assist. assoc.
prof.
prof.
year prof. prof. (non-tenure) (tenure)2002 312123
2003 28211410
2004 30
191312• very rare
• indistinguishable without understanding the contents

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Hierarchical Attributes
ItemAllergen
Milk Wheat · · ·2.5 5.8 · · · ···2.5 6.0 · · · ···√2.5 6.0 · · · ···√2.5 6.0 · · · ···
..
..
..
..
..
..
4.3 13.0 · · · ···Cal Sugar Fat · · ·Hamburger
150
Cheeseburger 160
Potato(S)160
Potato(M)160..
..
Gigaburger
280

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Hierarchical Attributes
Item
Cal Sugar Fat · · · Allergen Allergen · · ·Item
Cal Sugar Fat · · · Milk
Wheat · · ·Hamburger
150
2.5 5.8 · · ·······
Cheeseburger 160
2.5 6.0 · · ·······√
Potato(S)160
2.5 6.0 · · ····√
Potato(M)160
2.5 6.0 · · ····
..
..
..
..
..
..
..
..
Gigaburger
280
4.3 13.0 · · ·······
inappropriate decomposition. . .

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Hierarchical Attributes
Allergen Allergen · · ····Item
Cal Sugar Fat
MilkWheat · · ·Hamburger
150
2.5 5.8 · · ····
Cheeseburger 160
2.5 6.0 · · ····
√Potato(S)160
2.5 6.0 · · ····
√Potato(M)250
3.8 9.1 · · ····
..
..
..
..
..
..
..
..
Gigaburger
280
4.3 13.0 · · ····
Concatenate Multi-Level Attributes

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Headings, Delimiters, Footers, etc.
Phone DirectoryNameext. EmailAccounting
A. Smith
2850 smith
J. Doe2851 jdoe
Human Resource
T. Johnson 3010 tj
D. Adams 3011 adams
Do Not Decompose

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Semantics of Composite Cells
Nested Tables
Aquarium Admission Fee
CategoryFee
Adult$13
Child$4> 20 Adult $11
Child $3Group> 100 Adult $10
Child $2Replace with a Link to a Separate Table

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Automatic Detection of Logical Structure
Overview
We use:• structure of composite cells– to detect attribute names– to detect semantics of composite cells• uniqueness of values– to detect attribute names– to detect keys

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Automatic Detection of Logical Structure
Step1: Attribute Detection Based on Composite Cells• We deﬁned valid table structure by a set of rules.
• We search the attribute/body border satisfying them.
categoryweightmax min
type
card
2g to 6g
2 double postal 4g to 12g
typeregular
up to 50g
mail1
irregular
up to 4kg
type 3up to 1kg
up to 1kg
type 4up to 3kg
normal/brailleup to 30kg
parcelbook parcel
up to 3kg
for handicappedBrowsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Automatic Detection of Logical Structure
Step2: Attribute/Key Detection by Value Uniqueness• We ﬁnd a set of columns/rows that gives unique values.
• We give priority to those closer to top/left edge.
year
ﬁrst name last name age? freshman DavidAdams
18? freshman DavidJones
19? sophomore MaryAdams
19
..
..
..
..
..

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Automatic Detection of Logical Structure
Step3: Semantics of Composite Cells• cells spanning the entire row/column→ captions etc.
• composite cells in the attributes→ structured attributes• composite cells in the body without corresponding
partitions in the header→ nested tables• the others→ merged cells

Browsing Large HTML Tables on Small ScreensSchool of Informatics
Kyoto UniversityExperiment• We collected 80 tables, and our method can detectcorrect headers for 76 of them (95%).
• Our method fails when:– headers appear only at the bottom or only at the rightedge– tables have some illogical structure– it has some types of nested tables

Browsing Large HTML Tables on Small Screens

School of Informatics
Kyoto University

Future Work
1. Evaluation of the proposed browsing modes• Can users complete the task in shorter time?
• Detected attributes/keys really help users?
• Do we need record mode?
2. detection of logical tables described by <div> tags(e.g., Google)
3. Improvement of automatic detection methods
and more. . .