Shorthand
Properties for Setting Border Style, Width and Color All at Once
The
border WCSS property is a
shorthand property for setting the border style, width and color all
at once. The following WAP CSS style statement demonstrates the usage
of border:
table
{border: 2px solid black}
The
above WAP CSS style statement specifies that table borders are of
2-pixels wide, have the solid style and are in black color.
You
can specify the border style, width and color in any order you like.
The following two WAP CSS style statements are also valid:
table
{border: solid black 2px}
table
{border: black 2px solid}
The
border WCSS property
affects four sides of the border. The border-top,
border-right,
border-bottom and
border-left WCSS
properties are used in the same way as the border
WCSS property, except that they are used for setting the top, right,
bottom and left borders.
Example: Applying
WAP CSS Border Properties to Tables
Below
is a simple WAP CSS example that illustrates how to set the border
style, border width and border color of a table by making use of the
border properties that you have just learned.
These
are what we want to do in the example:
Here
is the markup:
(borderPropertiesEg1.xhtml)
<?xml
version="1.0"?> <!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Setting
Table Border</title> <style
type="text/css"> table {border: thick solid
purple} td { border-width:
thin; border-style: solid; border-color:
black } </style> </head>
<body> <table> <tr> <td>Cell
A</td> <td>Cell B</td> <td>Cell
C</td> </tr>
<tr> <td>Cell
D</td> <td>Cell E</td> <td
rowspan="2">Cell
F</td> </tr>
<tr> <td
colspan="2">Cell
G</td> </tr> </table> </body> </html>
Below
is the screenshot of the above WAP CSS example in a mobile phone
browser:
 Nokia
Mobile Browser 4.0
|
Feedback Form (ExpandCollapse)
|
|