2 different tables from each other

Asked

Viewed 1,652 times

1

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

 <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 like another. How do I get around this?

CSS table 1 (Built):

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 put on top

html css table
  • 1

    What do you mean you already have the table created in css? You just put html there. What have you tried to do so far in the other table?

  • 1

    Are you sure this CSS was made for this table? There is a class .default and two selectors thead and tbody that are not being used in table. Another point is that in HTML the table is with CSS inline width:500px and in CSS this value is changed width:100%.

  • This CSS was made for another table and now I want to create a new CSS

  • 1

    Friend, look for css tutorials, especially on the selectors. It seems that you still don’t understand how the css selectors work. Here’s a good tutorial on this.

  • Tip: width=500px also does not exist, px is used in CSS and not in html attributes. :)

  • @Chrisadler can accept any answer?

  • Withdraws .default is not necessary, makes name element class simpler class="minhatabela", ai works normal.

Show 2 more comments

2 answers

6

In the answer on the edge I gave an example that solves your problem.

The point is that using style in table you apply to all tables. Applying styles in one id, you decide which tables you want to apply.

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

This goes for any HTML element, not just tables. Try to understand all aspects of HTML and CSS and all their relationships. Avoid using ready-made CSS that you don’t 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>

I put in the Github for future reference.

Tutorials to help you:

2

Use selectors to distinguish 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>

Maybe the following links are helpful:
HTML - W3schools
CSS - W3schools

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.