Skip to content Skip to sidebar Skip to footer

How To Break A Line Or Space In Between Two Rows Of The Html Table

I need to give space or break between two rows, so that my page will looks good. if you look my code i had given many empty rows and column to make a space between two rows in the

Solution 1:

Try this:

<tr><td>
        Row 1
    </td></tr><tr><td>&nbsp;<!--you just need a space in a row--></td></tr><tr><td>
        Row 2
    </td></tr>

Solution 2:

According to the CSS box model:

margin values do not apply to table rows and table cells See: http://www.w3.org/TR/CSS2/box.html#margin-properties

padding and border values do not apply to table rows but apply to table cells See: http://www.w3.org/TR/CSS2/box.html#padding-properties

A quick fix is to add padding to the top of the row that you want to separate.

For example: http://jsfiddle.net/audetwebdesign/caXsZ/

Sample HTML:

<tablecellpadding="0"cellspacing="0"border="0"><trclass="row1"><td>Row One - 1</td><td>Row One - 2</td></tr><trclass="row2"><td>Row Two - 1</td><td>Row Two - 2</td></tr></table>

CSS:

td {
    border: 1px dotted blue;
}
tr.row2td {
    padding-top: 40px;
}

If you want to style borders around your table cells, you may need to add wrappers around the content and apply borders depending on the design details.

Solution 3:

border spacing attribute has to be specified in CSS

table
    {
    border-collapse:separate;
    border-spacing:10px0px;
    }

The above code set 10px spacing between the rows and 0px spacing between the columns

Solution 4:

The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.

<table cellpadding="4">

or using css :

<styletype='text/css'>table{ border-collapse: separate; }
  tabletd { border-spacing: 1em; }
</style>

Solution 5:

This can be achieved like this.

<tr> <td> <br> </td> <!--The br tag did what i was looking for --> </tr>

Post a Comment for "How To Break A Line Or Space In Between Two Rows Of The Html Table"