Home >Web Front-end >CSS Tutorial >cellpadding (HTML attribute)

cellpadding (HTML attribute)

Joseph Gordon-Levitt
Joseph Gordon-LevittOriginal
2025-02-27 08:26:09551browse
<code class="language-html"><!DOCTYPE html>


<title>HTML cellpadding Attribute</title>



<h1>HTML `cellpadding` Attribute</h1>

<p>Use the <code>cellpadding</code> attribute to add space between the cell content and its borders within an HTML table (<code>th</code> and <code>td</code> elements).  This effect is most noticeable when a table border is also defined, as shown below.</p>

<p><code>cellpadding</code> is similar to <code>cellspacing</code>, which controls the space *between* cells.</p>

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174061597142937.jpg" class="lazy" alt="cellpadding (HTML attribute) ">
<figcaption>Two tables demonstrating cellpadding values of five and ten pixels, respectively.</figcaption>

<h2>Example</h2>

<p>This table uses a <code>cellpadding</code> of "5" pixels:</p>

<code>
<table border="1" cellpadding="5">
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>
</code>

<h2>Frequently Asked Questions</h2>

<h3>What is the HTML `cellpadding` Attribute?</h3>
<p>The <code>cellpadding</code> attribute controls the padding (space) inside a table cell. It improves table readability and appearance.  It's applied to the <code><table></code> tag and uses pixel values.</p>

<h3>How do I use the HTML `cellpadding` Attribute?</h3>
<p>Include it within the <code><table></code> tag. For example: <code><table cellpadding="10"></code>.  "10" specifies 10 pixels of padding inside each cell.</p>

<h3>Can I specify different `cellpadding` for different cells?</h3>
<p>No. <code>cellpadding</code> applies uniformly to all cells. For individual cell padding, use CSS properties like <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code>, and <code>padding-bottom</code> on the <code><td></code> or <code><th></code> elements.</p>

<h3>Is the HTML `cellpadding` Attribute supported in HTML5?</h3>
<p>No.  Use CSS for padding control in HTML5.</p>

<h3>How can I use CSS to replace the HTML `cellpadding` Attribute?</h3>
<p>Use the CSS <code>padding</code> property. For example: <code>td { padding: 10px; }</code> applies 10-pixel padding to all table cells.</p>

<h3>What is the difference between `cellpadding` and `cellspacing`?</h3>
<p><code>cellpadding</code> is the space between a cell's border and its content; <code>cellspacing</code> is the space between cells. Both are best controlled with CSS in HTML5.</p>

<h3>Can I use percentage values for `cellpadding`?</h3>
<p>No, only pixel values are accepted. Use CSS for percentage values.</p>

<h3>What happens if I don’t specify a `cellpadding`?</h3>
<p>The browser uses a default value, which may vary.</p>

<h3>Can I use negative values for `cellpadding`?</h3>
<p>No, only non-negative integers are allowed.</p>

<h3>Is there a maximum value for `cellpadding`?</h3>
<p>There's no defined maximum, but excessively large values can distort the table's appearance.</p>


</code>

The above is the detailed content of cellpadding (HTML attribute). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:hidden (HTML attribute)Next article:hidden (HTML attribute)