Geek Answers Handbook

How to style multiple tables differently in html 5 using css

I am currently working on a website for my business from scratch using html5, css and javascript.

I have some tables. I want their style to be individual, for example, the sizes of different colors, etc.

I tried to give them each my class, and I made table.table1 for my css - for all 3, but only one of css works, for all three tables it seems ... where am I going wrong?

<form name="htmlform" method="post" target="taxshop@hotmail" action="html_form_send.php">
  <table class="contact" width="450px">
    <tr>
      <td valign="top">
        <label for="first_name">First Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="first_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="last_name">Last Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="last_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="email">Email Address *</label>
      </td>
      <td valign="top">
        <input  type="text" name="email" maxlength="80" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="telephone">Telephone Number</label>
      </td>
      <td valign="top">
        <input  type="text" name="telephone" maxlength="30" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="comments">Comments *</label>
      </td>
      <td valign="top">
        <textarea  name="comments" maxlength="1000" cols="25" rows="6">                       
        </textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        <input type="submit" value="Submit">  
      </td>
    </tr>
  </table>
</form>

The CSS for this table is as follows:

table.contact tr, td {
  border: 1px solid #ffffff;
  border-collapse: collapse;
  color:#000000;
  background-color: #ffffff;
  font-size: 1em;
  margin: 0;
  margin-bottom: 22px;
  padding: 4px;
  font-style: normal;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 0.25em;
  border-bottom-color: #ffffff;
  border-radius: 0px;
}
table.contact, td {
  padding: 5px;
  text-align: left;
}
table.contact label{
  display:inline-block;
  width:100px;
  margin-right:10px;
  text-align:right;
}
+4
source share
1 answer

You had a mistake in the front row, https://jsfiddle.net/yvvcspha/1/

table.contact tr, td {
}

, ; tr table.concat td , .
td table.concat, . table.contact td.

table.contact tr, table.contact td {
}

.

, learinig CSS HTML5, , .
.

+1

More articles:


All Articles