- How to Set Cellpadding and Cellspacing in CSS
- How to adjust spacing separately for the top, right, left, and bottom of each cell?
- HTML Table Padding & Spacing
- HTML Table — Cell Padding
- Example
- Example
- HTML Table — Cell Spacing
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- CSS Table Cell Padding
- Syntax
- How does Table cell padding work in CSS?
- Examples of CSS Table Cell Padding
- Example #1
- Example #2
- Example #3
- Conclusion
- Recommended Articles
- How to set cell padding in HTML?
- Example
- Example
How to Set Cellpadding and Cellspacing in CSS
How to adjust spacing separately for the top, right, left, and bottom of each cell?
You can use the CSS padding property to adjust the spacing of each cell in an HTML table separately. The padding property takes up to four values, which correspond to the top, right, bottom, and left sides of the element, respectively.
Here’s an example of how to adjust the spacing of each cell separately in an HTML table:
html> html> head> title>Title of the document title> head> body> table> tr> td style="padding: 10px 20px 30px 40px; background-color: cyan;">Cell 1 td> td style="padding: 20px 30px; background-color: cyan;">Cell 2 td> tr> tr> td style="padding: 0 0 10px; background-color: cyan;">Cell 3 td> td style="padding: 0 20px; background-color: cyan;">Cell 4 td> tr> table> body> html>
In this example, the first cell in the first row has a padding of 10 pixels for the top, 20 pixels for the right, 30 pixels for the bottom, and 40 pixels for the left. The second cell in the first row has a padding of 20 pixels for the top and bottom, and 30 pixels for the right and left. The first cell in the second row has a padding of 0 pixels for the top and right, and 10 pixels for the bottom. The second cell in the second row has a padding of 0 pixels for the top and bottom, and 20 pixels for the right and left.
You can adjust the values of the padding property to achieve the desired spacing for each cell in the table. Additionally, you can use CSS classes to apply the same padding values to multiple cells in the table.
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
hello | hello | hello |
hello | hello | hello |
hello | hello | hello |
hello | hello | hello |
hello | hello | hello |
hello | hello | hello |
HTML Table — Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom , padding-left , and padding-right properties:
Example
HTML Table — Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS Table Cell Padding
The table tag is already familiar with the HTML concepts, including cell padding, which is the HTML attribute. The attribute creates some space inside the table cell to get a white space or names it as padding between the element and table sides of the HTML, like the same as the CSS padding property or the attribute, which allows the same kind of spaces in the style document. We can set the CSS Padding property to align the table cells and different padding for each side of the table cells. By using this property, there is no limitation to the table cells.
Web development, programming languages, Software testing & others
Syntax
Using tag, we can set the table padding, sizes, and borders.
The above codes describe the basic syntax for the padding property of CSS style tags in HTML. We will use the class and table names to set the padding styles on web pages.
How does Table cell padding work in CSS?
Examples of CSS Table Cell Padding
Here are the following examples:
Example #1
table, th, td MobileNumber Username 8220244056 Sivaraman 1265377889 Raman
Example #2
table < border-collapse: collapse; width: 93%; >th, td < text-align: left; padding: 7px; border: 3px solid blue; >tr:nth-child(even) th MobileNumber Username 8220244056 Sivaraman 1265377889 Raman
Example #3
table < border-collapse: collapse; width: 93%; >th, td < text-align: left; padding: 7px; border: 3px solid blue; >tr:nth-child(even) ID Username Mobile Mobile Mobile Mobile Mobile City 1 Sivaraman 17548437940 17548467940 17548437943 17548435479 17548437942 Chennai 2 Raman 17548437945 17548436945 17548435945 17548433945 17548434945 Tirupppur
The padding property is used for table data in the above examples; the first one is the basic padding style example for the css table; the second one is we use some colors for highlighting the values in table cells; and final example, we use the menu bar styles like horizontal and vertical here basically horizontal is enable for the data so we can set the property has overflow:x it will enable automatically in the CSS table.
Conclusion
In CSS Style, We can’t apply the CSS padding in table-row-groups, table-header-groups, table-footer-groups, table-rows, table-columns, and table-column-groups elements in the web page. CSS3 removes the percentage format for potential padding values and introduces negative values as auto-increment values. This specification is in draft status only. It may include in future specifications.
Recommended Articles
We hope that this EDUCBA information on “CSS Table Cell Padding” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5
How to set cell padding in HTML?
Following is an example program to set cell padding in HTML.
DOCTYPE html> html> head> style> table, th, td < border: 1px solid black; >style> head> body> h1>Programming Languageh1> table> tr> th style="padding:10px">Languageth> tr> tr> td style="padding:10px">Rubytd> tr> table> body> html>
Example
Following is another example program to set cell padding in HTML.
DOCTYPE html> html> style> table,tr,th,td < border:1px solid black; >style> body> h2>Tables in HTMLh2> table style="width: 100%"> tr> th style="padding: 40px">Name th> th>Job roleth> tr> tr> td>Tharuntd> td style="padding: 10px">Content writertd> tr> tr> td>Akshajtd> td style="padding: 10px">Content writertd> tr> table> body> html>
Example
Following is one more example program to set cell padding in HTML.
DOCTYPE html> html> head> style> table, th, td < border: 1px solid black; border-collapse: collapse; >th, td < padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; >style> head> body> table style="width:60%"> tr> th>Firstnameth> th>Lastnameth> th>salaryth> tr> tr> td>Johntd> td>Smithtd> td>50,000td> tr> tr> td>Evatd> td>Jacksontd> td>94,000td> tr> tr> td>Miketd> td>Doetd> td>80,000td> tr> table> body> html>