Banish Funky Spaces in Your HTML Tables

If you’re using tables for page layout (a no-no in XHTML), it's likely you'll experience the unsightly addition of extra space in your layouts. To fix this problem, you need to check both your HTML table definition and the specifics of any governing style sheet.

HTML Table Definition

The HTML tag for tables by default doesn't control for some spacing requirements. Verify three things about the table tag within your HTML document: 

Read More

How to Use HTML and CSS to Create Tabs and Spacing

By Jennifer Kyrnin

1. Does your table have the cellpadding attribute set to 0?
   

   cellpadding="0"

2. Does your table have the cellspacing attribute set to 0?
   

   cellspacing="0"

3. Are there any spaces before or after your content and the table's tags?

Number 3 is the kicker. Many HTML editors like to have the code all spaced out, to make it easy to read. But many browsers interpret those tabs, spaces, and carriage returns as desired extra space inside your tables. Get rid of the whitespace surrounding your tags and you’ll have crisper tables.

Style Sheets

However, it may not be the HTML that's off. Cascading style sheets do control some display attributes of tables and depending on the page, you may or may not have deliberately added table-specific CSS in the first place.

Scan the governing CSS file for any of the following values inside the table, th, or td properties and adjust as needed: 

• border: Specifies the attributes of a table or cell border
• border-collapse: Treats adjacent borders as one, to avoid duplicating border widths
• padding: Offers blank space, in pixels, around each cell
• text-align: Determines the alignment of text within the cell
• border-spacing: Sets spacing between cells, in pixels

Alternatives

Although you can still use HTML tables (the standard is well-established and universally supported in today's browsers), most modern responsive web design uses cascading style sheets to place elements on a page. Tables still make sense for their original intended purpose of displaying tabular data, but for organizing the layout and content of a page, you're much better off using CSS layout instead.