Tables are used to display data in Tabular format, containing rows and
columns, on the screen.
The HTML tag
is used to define table. The table element can
contain the following:
* : It is used to specify the caption (Label) for the table. The
CAPTION element, by default is center-aligned at the top of the Table.
It’s ALIGN attribute can take value left, right, center to align the
caption.
‘+ : Table Row, is to specify the row in the table,
> CELLSPACING: used to set the space bétween the cells in a table. It takes
value in pixel. i
> CELLPADDING: used to set the space between the cell data and cell wall
ina table, It takes value in pixel.
v
WIDTH: used to set the width of the table, as either an absolute with in
pixels, or a percentage of the documents width. For example: attributes
A SIMPLE TABLE IN HTML Advanced HTML and CSS :: 143
TEST TABLE
HEADING 1
HEADING 2
HEADING 3
CELL 1
CELL 2
CELL 3
CELL 4
D> CELL 5
CELL 6
The output of attribute code is shown in Fig. 7.2
COLSPAN: Specifies the number of columns the cell can span, The default
COLSPAN for any cell is 1.
Use of Table Attributes
CELL |
Cell Spans 2 Columns
CELL 2
CELL 3
Certificate in Web Designing and Development
CELL4
The output of COLSPAN code is shown in figure 7.2
Figure 7.2 A sample view - COLSPAN
ROWSPAN: Specifies the number of rows the cell can span. The default
ROWSPAN for any cell is 1.
Example: Use of ROWSPAN
re
Use of Table Attributes
2
Cell Spans 2 rows
CELL 2
CELL 3
CELL 4
CELL 5
Nested Tables
‘Advanced HTML and CSS :: 145
‘Nested Tables means making a table inside another table. Since only the TH
and TD tags can hold data, you will have to code a full table inside the TH or
TD tag of another table.
Hint: Code the first table completely then between the
and the
tags (or between the pair of TH tags) code another table. The second table
‘must begin and end in the same cel.
Following is the example of using another table and other tags inside a table
cell.
Name
Salary
Ram Kumar
5000
Sheela Agarwal
7000
<1D>
This is another cell
Using list inside this cell
146 3: Certificate in Web Designing and Development
) tag, most browsers
provide the text to become bold and centered, which can be a nice visual
effect, but the
tag should only be used in data tables. Do not use it in
Jayout tables because you may confuse screen reader user.
5. Use the simplest possible table configuration. Visually Challenged users
will “see” all the contents from tables. Their screen readers will inform
the number of rows and columns in the table. When they try to navigate
from one area to the other within the table, they may become disoriented.
The rule of thumb here is, the simpler the better.
6. Designate row and column headers using the
tag. The very first step
towards creating an accessible data table is to designate row and/or column
headers. This is easy enough to do. In the markup, the
element
yee
first-line pefirst-line | Selects the first line of every
element .
irst-child pifirst-child | Selects every
elements that is the
first child of its parent
:before prbefore Insert content before every
element
after prafter Insert content after every
element
slang(language) | p:lang(it) Selects every
element with a lang
attribute value starting with “
The syntax of pseudo-classes:
selectorspseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
[Link]:pseudo-class {property:valu
Link Selector
You can apply what you already learnt in the previous lessons to links (ie.
change colors, fonts, underline, etc). The new point is that CSS allows you to
define these properties differently, depending on whether the link is unvisited,
visited, active, or whether the cursor is on the link. This makes it possible to
add fancy and useful effects to your website. To control these effects you can
use so-called pseudo-classes.
Example [Link]
Select and style unvisited, visited, hover, and active links:
ink ——_{color:green;}
fed {color:green;}
over {color:red;}
tive {color:yellow;} * 168 :: Certificate in Web Designing and Development
Use az link and a: visited for unvisited and visited links respectively. Links
that are active have the pseudo-class a: active and a: hover is when the cursor
is on the link.
Example [Link]
Output in Browser
Fig. 7.14: Sample output for [Link]
Pseudo-class: hover
The pseudo-class :hover is used when the mouse pointer hovers over a link. Advanced HTML and CSS :: 169
This can be used to create interesting effects. For example, if we want our
links [Link] yellow and be italicized when the cursor is pointed at them, our
CSS should look like this:
Example, Select and style a link when you mouse over it:
achover
t
background-color:yellow;
font-style: italic;
}
The hover selector can be used on all elements, not only on links.
Example [Link]
[Link] ;
[Link]
Note: The -hover selector style links on mouse-over.
170 =: Certificate in Web Designing and Development
Output in Browser
Fig, 7.15 : Sample output for [Link]
Navigation Bars
Having easy-to-use navigation is important for any web site. With CSS you
can transform normal HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base. In below example, source
codes will build the navigation bar from a standard HTML list. A navigation
bar is basically a list of links, so using the and elements make perfect
sense: ‘
Example [Link] x
A background color is added to the links to show the link area.
Notice that the whole link area is clickable, not just the text.
The above example code:
list-style-type:none - Removes the bullets. A navigation bar does not need list
markers
Setting margins and padding to 0 to remove browser default settings
To build a vertical navigation bar, style elements is used in to the code.
Output in Browser
‘A baceround colori added tothe Eek to show the ak area.
Fig. 7.16 : Sample output for Navigation Bar
Now let’s remove the bullets and the margins and padding from the lis
7.9 CSS FLOAT
With CSS float, an element can be pushed to the left or right, allowing other 172 :: Certificate in Web Designing and Development
elements to wrap around it. Float is very often used for images, but itis also
useful when working with layouts.
Elements are floated horizontally; this means that an element can only be
floated left or right, not up or down. A floated element will move as far to the
left or right as it can, Usually this means all the way to the left or right of the
containing element. The elements after the floating element will flow around
it, The elements before the floating element will not be affected. If an image
is floated to the right, following text flows around it, to the left:
Example:
img
c
float:right;
}
Example [Link]
In the paragraph below, we have added an image with style
float:right. The result is that the image will float to the right in
the paragraph.
National Institute of Open Schooling.
National Institute of Open Schooling...
Output in Browser
Fig. 7.17: Sample output for Float
Turning off Float - Using Clear
Elements after the floating element will flow around it. To avoid this, use the
clear [Link] clear property specifies which sides of an element other
floating elements are not allowed. Add a text line into the image gallery, using
the clear property:
Example:
-text_line
{
clear:both;
3
7.10 CLEAR
The clear CSS property specifies whether an element can be next
to floating clements that precede it or must be moved down (cleared) below
them, The clear property applies to both floating and non-floating elements. 174 :: Certificate in Web Designing and Development
Property Values
Value Description
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
none Default. Allows floating elements on both sides
inherit Specifies that the value of the clear property should be inherited
from the parent element
‘Table 7.3
‘When applied to non-floating blocks, it moves the border edge of the element down
until itis below the margin edge of all relevant floats. This movement (when it
happens) causes margin collapsing not to occur.
When applied to floating elements, it moves the margin edge of the element below
the margin edge of all relevant floats. This affects the position of later floats, since
later floats cannot be positioned higher than earlier ones. The floats that are relevant
tobe cleared are the earlier floats within the same block formatting context.
Example [Link]
No floating elements allowed on the left or the right side of a specified paragraph:
This text appear afier clear property.
'95" height="84" /> Advanced HTML and CSS :: 175
‘The output of the above code is given below.
fa
‘This text appear afer clear property
This is some text.
Fig. 7.18 : Clear Property
7.11 VISIBILITY
Aproperty called visibility allows you to hide an element from view. You can use
this property alongwith Javascriptto create very complex menu and very complex
webpage layouts,
‘You may choose to use the visibility property to hide error messages that are only
displayed ifthe user needs to see them, or to hide answers to a quiz until the user
selects an option.
Note: Remember that the source code will still contain whatever isin the invisible
paragraph, so you should not use this to hide sensitive information such as credit
card details or passwords.
The visibility property can take the values listed in the table that follows:
‘Table 7.4 : visibility values
Value Description
Visible | The box and its contents are shown to the user.
Hidden | The box and its content are made invisible, although they still
affect the layout of the page.
Collapse | This is for use only with dynamic table columns and row
effects.
Here is the example:
This will produce following result:
This div has relative positionin;
Absolute Positioning
‘An element with position: absolute is positioned at the specified coordinates
relative to your screen top left comer. Advanced HTML and CSS :: 177
Here is the example:
This div has absolute positioning,
This will produce following result:
This div has absolute positionin
Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular
spot on the page - regardless of scrolling. Specified coordinates will be relative
to the browser window.
Here is the example:
This div has fixed positioning.
Scroll down this page using scrollbar available at right side:
ixed;width:600px;">
Simple Column Layout
Here are the steps to create a simple Column Layout using CSS: 180 :: Certificate in Web Designing and Development
‘Set the margin and padding of the complete document as follows:
Now wewill define a column with yellow color and later we will attach this rule to
a
:
Upto this point we willhavea document with yellow body, so lets now define another
division inside level:
Now we will nest one more division inside level! and we will change just
background color:
Finally we use the same technique, nest a level3 division inside level2 to get
the visual layout for the right column: Advanced HTML and CSS ::
‘Complete source code
Final Content goes here...
Final Content goes here...
Final Content goes here...
_
This section will expand when you will put more content here:
In similar way you can add top navigation bar or ad bar at the top of the page.
‘This example code will produce following result:
Fig. 7.21 : Simple Column Layout ‘Advanced HTML and CSS :: 183
‘The CSS muiti-column layout extends the block layout mode to allow the easy
definition of multiple columns of text. People face problems in reading text if lines
are too long; ifit takes too long for the eyes to move from the end of the one line
to the beginning of the next, they lose track of which line they were on. Therefore,
to make maximumuse ofa large screen, you should have limited-width columns of
text placed side by side, just as newspapers do.
Unfortunately this is impossible to do with CSS and HTML without foreing column
breaks at fixed positions, or severely restricting the markup allowed inthe text, or
using heroic scripting. This limitation is solved by adding new CSS properties to
extend the traditional block layout mode.
Here is an example ofa simple three-column class:
-webkit-column-gap: 20px;
}
Of which you would apply to a block of text like so:
Sample HTML:
‘