Cell Padding in a Table

Up To 60% OFF In Clearance Center, Everything In Stock, Limited Quantities, Free Shipping

I wanted to add padding between the borders of cells in a table and the text within the cells, since the text was appearing up against the left and right borders of cells as shown below:

Unpadded table

MIME type

text/html

text/css

image/jpeg

text/xml

image/png

image/gif

I could add padding using <table border="1" cellpadding="10">, but that put padding at the top and bottom of the text which I didn't want.

Cellpadding

MIME type

text/html

text/css

image/jpeg

text/xml

image/png

image/gif

The padding can be specified using CSS by creating a style section inside the head section for the page will work to specify left and right padding in pixels. E.g.:

<style type="text/css">
   .padded {padding-left: 10px; padding-right: 10px;}
</style>

Then I could use the following for rows in the table:

Padded class for td

MIME type

text/html

text/css

image/jpeg

text/xml

image/png

image/gif

Wrapping the table in a div with padding specified in a style section for that class of div will also work. E.g., for the style section:

<style type="text/css">
   .mimetypes td { padding-left:10px; padding-right:10px;}
</style>

And then for the table:

Table inside div

MIME type

text/html

text/css

image/jpeg

text/xml

image/png

image/gif

Created: Saturday March 29, 2014