Home
1
Draw a vertical line with HTML Wed Jul 07, 2010 12:20 am
Guest
Guest
Draw a vertical line with HTML Working with the tables |
Okay guys i know many of you wonder how to create a thin vertical line.So we are here to show you how!  .However WebArtz doesn't support HTML so sorry i cant post samples you will have to work it at your HTML pages.You all know how we can make a horizontal HTML line,we just insect that code: But what happens with Vertical lines? A vertical line is easy to achieve but appears to be little-documented. There are two simple ways to do this: 1. the all-browser-compatible way The HTML is this one:
The first, wider column contains the main text, with the third column containing the 'news' section. The middle column contains the thin line, which appears thicker in this example only because the table borders are made visible; normally, you would set the border to have a width of zero in this kind of layout.  Question: So whats going on there?   Answer: * no table border (set it explicity to zero) * the column which contains the line should have a width of 1 pixel, must not have the align or valign parameters set, and must contain some contents which must not widen the column; a single <BR> element can be used, or I prefer a 1-pixel square transparent .GIF file * the table's cellpadding attribute must be set to zero or the line will be thickened * the table's cellspacing can be set to greater than zero to achieve a gap between the line and the cell contents, but if this is done the table can only contain one row; otherwise, the vertical line will be interrupted by the extra spacing (try it and see)  2. using a CSS style (more simple and the one i use )You can use a much simpler technique, which saves fiddling around with the table. All you have to do is set a left (or right) border for a cell in a table. This can be included in a style sheet if you wish. The CSS syntax is the following: You can edit the border,the pixels,the color and the padding. The advantage of this method is that you can have more than one row in the table, and the vertical line won't be interrupted. Hope you found my tutorial useful Visit the WebArtz Online HTML Editor to test the codes! |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
sorry.