2 different tables from each other

Navigation
1

I want to create two tables on the same page only one will have borders and another will not. I have one already created in CSS but now I can not create another one. 

 <table border="0" width="500px" height="1000px">
 <tr >
 <td>
  <iframe src=".PDF"   ></iframe>
  </td>
  </tr>
  <tr>
  <td>
  <iframe src=".PDF"  ></iframe>
  </td>
  </tr>
  </table></center>

This table looks just like the other one. How do I get around this?

CSS table 1 (Constructed): 

table {
    width: 100%;
        }

    table.default {
        width: 100%;
                }

        table.default tbody tr {
            border-bottom: solid 1px #e0e0e0;
        }

        table.default td {
            padding: 0.5em 1em 0.5em 1em;
        }

        table.default th {
            font-weight: 600;
            padding: 0.5em 1em 0.5em 1em;
            text-align: left;
        }

        table.default thead {
            background-color: #555555;
            background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
            background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
            background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
            background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
            background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
            color: #fff;
        }

PS: Now I want to create a new CSS for the table I placed above

    
asked by anonymous 21.01.2015 / 11:58

2 answers

6

In the response on the border I gave an example that solves your problem.

The point is that using style in table you apply to all tables. By applying styles to a id , you decide on which tables to apply.

It is still possible to apply to class , so you can apply it to a group of tables.

This holds true for any HTML element, not just tables. Try to understand all aspects of HTML and CSS and all their relationships. Avoid using CSS that you do not know what it's for. 

    #tabela1 {
        border: 0px;
        margin: 0px auto;
        width: 500px;
        height: 600px;
    }
    #tabela2 {
        border: 1px solid;
        margin: 0px auto;
        width: 500px;
        height: 600px;
    }
      <table id="tabela1">
        <tr>
          <td>
            texto1
          </td>
        </tr>
        <tr>
          <td>
            texto2
          </td>
        </tr>
      </table>
      <table id="tabela2">
        <tr>
          <td>
            texto1
          </td>
        </tr>
        <tr>
          <td>
            texto2
          </td>
        </tr>
      </table>

Tutorials to help you:

21.01.2015 / 12:20
2

Use selectors to distinguish which tables your page has. 

p {
  color: red
}

#p {
  color: blue
}

.p {
  color: green
}
<p>Selecionado por elemento</p>
<p id='p'>Selecionado por ID</p>
<p class='p'>Selecionado por classe</p>

table {
  margin: 10px 0
}

.animais {
  border:1px solid #ccc;
  text-align: center;
  width: 100%
}

.pessoas {
  background: #2980b9;
  color: #fff;
  text-align: center;
  width: 100%
}
<table class='animais'>
  <tr>
    <td>Cachorro</td>
    <td>Gato</td>
  </tr>
  <tr>
    <td>Peixe</td>
    <td>Zebra</td>
  </tr>
</table>

<table class='pessoas'>
  <tr>
    <td>Maria</td>
    <td>João</td>
  </tr>
  <tr>
    <td>Jubiléia</td>
    <td>Cleoswaldo</td>
  </tr>
</table>

The following links might be helpful: HTML - W3schools
CSS - W3schools

    
21.01.2015 / 12:25
Mathematical logic betting on the lottery Tag p rendering Line Break (no use of br /)