[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Table padding

Posted on 2011-03-20
4
Medium Priority
?
229 Views
Last Modified: 2012-05-11
I have a table for which I have defined at the css padding=0. But I want for specific cells to have bigger padding. How can I get this?
0
Comment
Question by:darkbluegr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35176674
You may not be able to with a table.  This page http://www.quirksmode.org/css/box.html shows how the "box model" treats padding, margin and border.  In the current model, they are all Outside the content box.

You can try and see what happens.  Give one of the <td>s a 'class' and define some padding for it.
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35176733
For a specific cells... you have to set an attribute of id or class. Then set their padding to whatever you want with:
.mycell{
 padding: 5px !important!;
}
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 1000 total points
ID: 35177399
or you can style every cell differently when you display them like this.

<td style="padding-left:5px;padding-right:5px">Text</td>
<td style="padding-left:10px:padding-right:20px">Some more text</td>

You can do it that way or you can create all your different "classes" and assign different classes to each td cell.

.class1{
padding-left:5px;
padding-right:5px;
}
.class2{
padding-left:10px;
padding-right:20px;
}
.class3{
padding-left:0px;
padding-right:0px;
padding-top:2px;
padding-bottom:2px;
}

Then all you do set the class name when you insert the table.

<table><tr><td class="class1">Some text</td><td class="class2">More text</td><td class="class3">Some more text</td></tr>
</table>

I think you get the idea?
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35177475
To take @elvin66's code a little further, tables are the things that 'break the rules' and also don't 'inherit' styles for the most part.  This little page shows that the padding is done on the inside of the 'td's whereas with a 'div' it would be on the outside.  The top and bottom rows are 'unstyled' and the center row is styled.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Table Padding</title>
<style type="text/css">
<!-- 
.class1{
padding-left:5px;
padding-right:5px;
}
.class2{
padding-left:10px;
padding-right:20px;
}
.class3{
padding-left:0px;
padding-right:0px;
padding-top:2px;
padding-bottom:2px;
}

-->
</style>
</head>
<body>
<h1>Table Padding</h1>

Then all you do set the class name when you insert the table.

<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td>Some text</td><td>More text</td><td>Some more text</td></tr>
<tr><td class="class1">class1</td><td class="class2">class2</td><td class="class3">class3</td></tr>
<tr><td>Some text</td><td>More text</td><td>Some more text</td></tr>
</table>

</body>
</html>

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question