Pages

» Unlabelled » How to Increase Padding Between Columns in HTML

Wednesday, September 25, 2013

How to Increase Padding Between Columns in HTML

There are three ways to increase the space between columns in a table written in the HTML programming language that is the basis of the Web. You can use the table's "cellspacing" attribute to increase the space between all the cells in the table; you can use the "cellpadding" attribute to add padding inside all the cells; or you can use an individual cell's "width" attribute to widen it.

Instructions

    1

    Find the opening tag. In HTML, table data is always preceded by a

    tag and followed by a closing
    tag. The parameters in this tag set the general attributes for the entire table, for instance, the existence of a border, the colors or the size of the table on the page. For reference, here's what a very simple HTML table looks like:

    1 2
    3 4

    This creates a table with a one-pixel border around it, containing two rows (the two ... sections) of two columns each (the four ...) sections. The cells contain the numbers 1 to 4. You can test this, along with any other HTML code, by copy and pasting it into the HTML Test Bed (see Resources) and clicking "Display."

    2

    Add a "cellspacing" or "cellpadding" attribute to the

    tag. "Cellspacing" adds empty space to the table between each cell; "cellpadding" expands each cell to contain empty space around its contents. For example, if the tag previously read:

    change it to:

    or

    where X is the size of the added space, in pixels. You can also combine spacing and padding -- just put them both in there, with a space separating them, just as a space separates the added attributes above from the "border" attribute.

    3

    Change the width of an individual cell in the table -- adding space between it and the columns around it but nowhere else in the table -- by adding an attribute to that cell's tag. This will be a

    where "XYZ" is the contents of the cell. Add a "width" attribute to the

    or as a percentage of the browser window:

    In the second example, the width of the cell is always exactly 20% of the width of the browser window, no matter what the user's screen resolution is or how he's sized his window. This is often a more reliable and compatible way of expressing width -- it ensures that the table won't become unreadable under certain conditions. Whichever way you do it, you can set the width of as many cells as you want. Add a "width" attribute to the

    tag like this:

    		XYZ tag. The width can be expressed either as pixels:

    		XYZ XYZ tag of every cell in a column to effectively expand that column.

    How to Increase Padding Between Columns in HTML Reviewed by Unknown on Wednesday, September 25, 2013 Rating: 4.5
    Posted by at 3:52 PM

    0 comments:

    Post a Comment