Equivalent for cellpadding in CSS

Udemy - 30 Amazing Days of HTML and CSS Learning
30 Amazing Days of HTML and CSS Learning
Learn HTML & CSS and start creating your own websites within 30 days
1x1px

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:

  1. Cell Padding in a Table

 

TechRabbit ad 300x250 newegg.com

Justdeals Daily Electronics Deals1x1 px