2. MY ELEMENT: THE TABLE
The Oxford Dictionary Defines a table as “a set of
facts or figures systematically displayed, especially in
columns”
It is often utilised to demonstrate a relationship
between different data types. In my assignment, I
have used a table to represent a hypothetical set of
grades that Albert Einstein could have received at
school.
3. MY ELEMENT: THE TABLE
Below Is the table that I have used on my page. It
consists of a heading, two rows and five columns.
4. MY ELEMENT: THE TABLE
You can see that my table efficiently depicts the
relationship between the four different sets of marks
Einstein received, and the four subjects he was
enrolled in.
A table and this inherent efficiency, saves the author
space on the screen, and increases the amount of
information that can be displayed on one page.
5. CSS USABILITY
I have made two key format decisions inside my CSS
that has greatly improved usability.
The first is the interior spacing within the table itself. It is
described by these five lines of code:
tr,td{
padding:5px;
padding:5px;
padding:5px;
padding:5px;}
6. CSS USABILITY
With Code:
Without Code:
When these two approaches are compared, you can
see how this small tweak vastly improves readability.
7. CSS USABILITY
The second key format decision I made was the use of
colour on my page.
I picked 3 complementary colours to form my colour
scheme. They are as follows:
#8D8D8D
#C4C4C4
#404040
8. CSS USABILITY
The image below demonstrates this colour scheme
visually:
This scheme was chosen for its subtlety, but also to
help define the 3 specific areas of the page.
Additionally, it does not conflict with the black text.
13. CSS APPLICATION
CSS can be used in conjunction with the Table
element to create a diverse range of results. In
addition to its broad range of functionality, in can be
applied differently, with the use off the different CSS
Styles. This is demonstrated in the following slides.
Examples have been reproduced from:
http://www.w3schools.com
14. CSS APPLICATION:
INTERNAL STYLE SHEET
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
</style>
</head>
15. CSS APPLICATION:
INLINE STYLE
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
16. NOTES ON CSS APPLICATION OPTIONS
The external style sheet approach is ideal. This
methodology clearly separates the context of “Style”
and “Content”
Other options complicate development, and
heighten the risk of syntax errors occurring during the
coding process.
