With HTML 4, you can stipulate the padding around cells in a
table using the cellpadding parameter, e.g.:
<table cellpadding="3"> . However with
HTML5, use of the cellpadding parameter for spacing around
elements of a table has been deprecated. E.g., if you check your HTML
code for adherence to the HTML 5 standard with the
Nu Html Checker provided by the
World
Wide Web Consortium, you will see an error similar to the following
one displayed if you have the cellpadding parameter set in the HTML code
for a table.
The cellpadding attribute on the
table
element is obsolete.
Use CSS instead.
From line 102, column 1; to line 102, column 34
ure.</p>↩↩<table border="1" cellpadding="3">↩↩<scr
So how can you achieve the same effect, but make your HTML code HTML 5
compliant using Cascading Style Sheets, instead? One way is to set the
padding individually for each td and th element in
the table. E.g., suppose I had been using <table border="1"
cellpadding="3">. I can set the padding on each td
element in the table as follows:
<td style="padding: 3px;">
Or I could include the following style section in the HEAD
section of the HTML code for the webpage:
<style type="text/css">
td { padding: 3px; }
</style>If you didn't want to use that padding for every table in a page, you
could create a CSS class name, e.g., padded, as shown below:
<style type="text/css">
.padded { padding: 3px; }
</style>You could then apply that class to any td element in a
table where you wanted the padding to be 3 pixels, i.e., where you might
formerly have used <table cellpadding="3">. I.e.:
<td class="padding">Some text</td>
References: