Readings:
Typographic Web Design :
Chapter 10 : Tabular Information p. 143-145
- Tables can be read by columns, rows or both.
- Consider legibilty, proximity, similarity and how people read when building tables.
legibility
Use your legibility skills: adjust font size, letter spacing, color and line height. Try to read the type. Is it easy to read? Adjust as needed.
proximity
How is the data intended to be read?
by row : add more space between rows
by column: add more space between columns
similarity
Use similarity to separate headings from data. Be consistent with type treatment, units of measurement and alignment. Keep rules and lines to a minimum. Let the data be the most important element.
Lists
In HTML, there are two types of lists: ordered and unordered.
unordered lists
The list items are marked with bullets. The bullets can be defined by list-style-type such as circle, square or none, or defined by an image:
in the html:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
in the css:
ul {
list-style-type: none;
background-image: url(purpleBullet.png);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
in the browser:
Coffee
Tea
Milk
ordered lists
Ordered list items are marked with numbers or letters. The bullets can be defined by list-style-type such as upper-roman, lower-alpha, etc.
in the html:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
in the css:
ol { list-style-type: lower-alpha; }
in the browser:
a. Coffee
b. Tea
c. Milk
example:
table
list
exercise:
- After reading chapter 10, design a comparison table with branding which matches the rest of your site in your siteplan.
- Create all of the pages for your site with html. Your secondary pages should have many of the same elements as the home page: same grid, colors, branding.
- If applicable, use the code to format your lists.