Wednesday

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

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Outer table border only

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Outer table dashed thick color border

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

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

Border Collapse

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

CSS classes style table

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table 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

CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

How do you feel like these table parameters now.

No comments: