HTML div code

▶Browser Support

    

The

tag is supported in all major browsers.

▶Definition and Usage

The

tag defines a division or a section in an HTML document.
The

tag is used to group block-elements to format them with styles.

▶Tips and Notes

Tip: The

element is very often used together with CSS, to layout a web page.
Note: Browsers always place a line break before and after the

element.

Attribute	Value	Description	Example
align	left right center justify	Specifies the alignment of the content	align=center
background-color	HEX color	Specifies the color of the background	background-color: yellow; background-color: #c0c0c0;
class	classname	Specifies a classname for an element	class="background"
style	style_definition	Specifies an inline style for an element	style="color:#00FF00"

The reference to entity "path" must end with the ';' delimiter.

Solution: replace "&" with "& amp;" (remove space in between)

When I try to add this url
href='http://longervogue.com/index.php?route=product/category&path=20_42;'
to top menu, blogger pops up this error message:
Error parsing XML, line 935, column 90: The reference to entity "path" must end with the ';' delimiter.

This is because "&" is a reserved character in XML that means "an XML entity begins here". You need to encode them as an entity to solve that problem.

HITS

HTML email link code

Normal questions:

Q. How to add email link to text?

Q. How to auto fill in email subject and body?

(Click link below to try)

Example 1:

Email me

HTML Code 1:

<a href="mailto:myemail@longervogue.com">Email me</a>

Example 2:

Email me again!

HTML Code 2:

<a href="mailto:myemail@longervogue.com?subject=Subject&body=Body">Email me again!</a>

Welcome No.  visitors

How to create dashed table border in HTML?

Have you realized by defining different style of table borders, programmers can also do the graphical design?

Basic table border

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table border only

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table dashed thick color border

Code	Result
<table style="border:3px dashed blue;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

You may play with these parameters such as colors, thickness (in px) and dashed, dotted, double or solid.

Border Collapse

Code

Result

<table style="border:1px solid black;border-collapse:collapse;"> <tr> <th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th> </tr> <tr> <td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td> </tr> <tr> <td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

CSS classes style table

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myTable { background-color:#eee;border-collapse:collapse; } .myTable th { background-color:#000;color:white;width:50%; } .myTable td, .myTable th { padding:5px;border:1px solid #000; } </style> <!-- End Styles --> <table class="myTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

In fact, by defining cell background colors, such table style can be achieved by pure html. It saves some coding by using CSS and easier for further use. If you keep both css and html code in one post in blogspot, this table style will also show correctly. cool right.

CSS classes style display row line only

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; } .myOtherTable th { background-color:#BDB76B;color:white;width:50%; } .myOtherTable td, .myOtherTable th { padding:5px;border:0; } .myOtherTable td { border-bottom:1px dotted #BDB76B; } </style> <!-- End Styles --> <table class="myOtherTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

How do you feel like these table parameters now.

How to make text flow/ scroll in HTML

Code	Result
<marquee behavior="scroll" direction="left">scrolling text</marquee>	scrolling to the left

Code	Result
<marquee behavior="scroll" direction="right">scrolling text</marquee>	scrolling to the right

Code	Result
<marquee behavior="scroll" direction="up">scrolling text</marquee>	scrolling upwards

Code	Result
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><br /> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>	Slow scroll speed Medium scroll speed Fast scroll speed

By playing with this code, you may adjust scrolling speed or direction or replace text with image. Have fun.