ghjbashbjboiusvcx
css Load More
Breaking News
About
Recent Posts Load More
Sunday, 16 March 2014
Wednesday, 31 July 2013
GREAT HTML TABLES - FOR BLOGGER, WORDPRESS, JOOMLA, PROJECTS.
By:
Unknown
0
comments
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
CODE: Get its code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Telephone
Bill Gates
555 77 854
555 77 855
Telephone:
555 77 854
555 77 855
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Table 1: Simple Table
Demo:
One column:
| 100 |
One row and three columns:
| 100 | 200 | 300 |
Two rows and three columns:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
CODE: Get its code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CODE: Get its code
Table 2: Tables Without Borders
Demo:
This table has no borders:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
And this table has no borders:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
CODE: Get its code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Table 3: Table Header
Demo:
Table headers:
| Name | Telephone | Telephone |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
Vertical headers:
| First Name: | Bill Gates |
|---|---|
| Telephone: | 555 77 854 |
| Telephone: | 555 77 855 |
CODE: Get its code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Table 4: Table with a Caption
Demo:
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
CODE: Get its code
Table 5: Table cells than span more than one row/column
Demo:
Cell that spans two columns:
| Name |
|---|
555 77 854
555 77 855
Cell that spans two rows:
| First Name: | Bill Gates |
|---|---|
555 77 854
555 77 855
CODE: Get its code
Table 6: Tags inside a table
Demo:
| This is a paragraph This is another paragraph | This cell contains a table:
| ||||
This cell contains a list
| HELLO |
CODE: Get its code
Table 7: Cell padding (controls white space between text and borders)
Demo:
Without cell padding:
| First | Row |
| Second | Row |
With cell padding:
| First | Row |
| Second | Row |
CODE: Get its code
Table 8: Cell spacing (controls space between cells)
Demo:
Without cellspacing:
| First | Row |
| Second | Row |
With cellspacing="0":
| First | Row |
| Second | Row |
With cellspacing="10":
| First | Row |
| Second | Row |
CODE: Get its code
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Labels:
GREAT HTML TABLES
Wednesday, 10 July 2013
CSS: CSS List - Learn CSS for Free and Fun ......
By:
Unknown
0
comments
CSS List
With the help of CSS list properties; you can set an image as the list-item marker and place the list-item marker.
With CSS you can prepare your list item
You can add properties like
image
style
Tag:ol {list-style-type: decimal;}
The CSS list property allocates you to set an image as the list-item marker and place the list-item marker. You can easily add properties like image and style.
Example:
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ul.none {list-style-type: none;}
</style>
</head>
<body>
<ul class="disc">
<li>Sun</li>
<li>Moon</li>
<li>Stars</li>
</ul>
<ul class="circle">
<li>Sun</li>
<li>Moon</li>
<li>Stars</li>
</ul>
<ul class="square">
<li>Sun</li>
<li>Moon</li>
<li>Stars</li>
</ul>
<ul class="none">
<li>Sun</li>
<li>Moon</li>
<li>Stars</li>
</ul>
</body>
</html>
CSS: CSS Outline - Learn CSS for Free and Fun
By:
Unknown
0
comments
With CSS we can draw a line bounding your element. We can add properties like
color style
width
Remember this option does not work with internet explorer.
Tag: outline: green dotted thick;
The CSS outline is used to make an element “stand out’. It is a line that is drawn around the
outside the border edge. Additional properties like color, style and width can be added.
Example:
<html>
<head>
<style type="text/css">
p {
border: red solid thin;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
CSS: CSS Padding - Learn CSS for Free and Fun .......
By:
Unknown
0
comments
With CSS we can define the space between the element border and the element content. Padding can be applied at
top of the page
left of the page
bottom of the page
right of the page
Tags:
padding-top: 2cm;
padding-left: 3cm;
padding-bottom: 4cm;
padding-right: 5cm;
padding: 2cm 3cm 4cm 5cm;
The CSS padding identifies the space between the element border and the element content.
CSS padding can be applied to the top, bottom, left and right of the web page.
Example:
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm;}
td.test2 {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm
and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>
Demo:
| This is a tablecell with equal padding on each side. |
| This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. |
CSS; CSS Margin - Learn CSS for Free and Fun ......
By:
Unknown
0
comments
With CSS we can set Margins at the
top of the page bottom of the page
right of the page
left of the page
Tags:
margin-top: 5cm;
margin-right: 6cm;
margin-bottom: 7cm;
margin-left: 8cm;
margin: 5cm 6cm 7cm 8cm;
A margin is a space around an object. We can set margin in web pages using CSS. Using
separate properties within margin syntax we can define space all around the element.
Example:
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
CSS: CSS Border - Learn CSS for Free and Fun
By:
Unknown
0
comments
What we can do with CSS Border?
We can set the color of the border We can set the style of the border
We can set the width of the border
The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.
The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is
<style type="text/css">
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are
<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>
The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is
<style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>
Subscribe to:
Comments (Atom)




