HTML Table Cellpadding Attribute

In HTML, cellpadding is the attribute of Table container which is used to add space between the data and cell boundaries or corners. As we discussed in previous tutorials that each attribute has value with measurement unit in case of cellpadding the value is number and measurement unit is pixels.

 

Let’s take an example to see how table cellpadding attributes works.

   1:  <html>
   2:  <body>
   3:  <table border="1">
   4:  <h3> Table without cellpadding </h3>
   5:  <tr>
   6:  <td>
   7:  Student Name
   8:  </td>
   9:  <td>
  10:  Student Marks
  11:  </td>
  12:  </tr>
  13:  </table>
  14:  <table cellpadding="10" border="1">
  15:  <h3> Table with cellpadding </h3>
  16:  <tr>
  17:  <td>
  18:  Student Name
  19:  </td>
  20:  <td>
  21:  Student Marks
  22:  </td>
  23:  </tr>
  24:  </table>
  25:  </body>
  26:  <html>

The code show the result in browser:

image 

The cellpadding can be also used for specific cell for that you have to use the CSS style as shown in below example:

<html>
<body>
<table border="1">
<h3> Table without cellpadding </h3>
<tr>
<td>
Student Name
</td>
<td>
Student Marks
</td>
</tr>
</table>
<table border="1">
<h3> Table cell with cellpadding </h3>
<tr>
<td style="padding:20px">
Student Name
</td>
<td>
Student Marks
</td>
</tr>
<tr>
<td>
Adam
</td>
<td>
80
</td>
</tr>
</table>
</body>
<html>
 

The output of the code is shown below.

image

Tags: , , , , , , , ,

Author: Revo

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *

four + 18 =

 

Pin It on Pinterest

Shares
Share This