Question

I’m learning CSS and HTML.
In my code I have:

<style>
table, td, th
{
padding: 5px;
}
</style>

This rule works on all tables on the page.
Now I want to make a table without padding:
Here is the source:

 <table>

  <tr>
   <td>Login</td>
   <td><input type="text" name="login" class="input"></td>
  </tr>

  <tr>
   <td>Password</td>
   <td><input type="password" name="password" class="input"></tr>
  </tr>

 </table>

How to do this?

Answer 1

If you want to add specific styles to this table that override the default styles you’ve defined, then you’ll need some way to reference it in CSS.

Typically, you would give it a class or an ID — eg <table class='myspecialtable'>....</table>

Then you can have a stylesheet which overrides your default 5px styles, just for this table.

.myspecialtable, .myspecialtable td, .myspecialtable th {
    padding: 0px;
}

If you can’t add an ID or class to this table, then you could add it on a parent element, and the effect would be the same (as long as that parent doesn’t contain any other tables, of course). In this case, your CSS would look something like this:

.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
    padding: 0px;
}