Format CSS table color

Asked

Viewed 927 times

2

I wish my chart looked like this.

inserir a descrição da imagem aqui

but when adding the content to it it gets this look I’m not able to leave it as the top table.

inserir a descrição da imagem aqui

function listarProdutos(){
    var conteudo="<table border='1'>";
     conteudo+="<tr>";
    conteudo+="<div class='indice'><p>Indice</p></div>"
    conteudo+="<div class='nome'><p>Nome</p></div>"
     conteudo+="</tr>";
    //pos contator
    for(var pos=1;pos<indice.length;pos++){
        conteudo+="<tr>";
        conteudo+="<td>"+indice[pos]+"</td>";
        conteudo+="<td>"+nomes[pos]+"</td>";
        conteudo+="</tr>";
    }
    conteudo+="</table>";
    document.getElementById("txtrelatorio").innerHTML=conteudo;
}

.indice, .nome{

        font-size: 15pt;
        font-weight: 700px;
        background-color: #000066;
    }

    tr,td{
        font-size: 14pt;
        background-color: #000066;
        color: #CCCCCC;
    }
javascript html css html5 css3

  • You are declaring tr and td with the same look, separate one css for tr and another for td, after all TR is line and TD is column. So you’re giving the same css to the whole table

2 answers

1

table thead{
    background: #2980b9;
    color: #FFF;
}

table tbody{
    background: #3498db;
    color: #FFF;
}

table thead tr td{
    padding: 5px;
    text-align: center;
}

table tbody tr td{
    padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Indice</td>
                <td>Nome</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Conteudo Primeiro</td>
                <td>Conteudo Segundo</td>
            </tr>
        </tbody>
    </table>    
</body>
</html>

Thus?

1


Just use this code and your table will have the header different from the body 

<html>
            <head>
                <title>TODO supply a title</title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <style>
                        tr{
                            font-size: 14pt;
                            background-color: white;
                            color: white;
                        }
                        th{
                            font-size: 14pt;
                            background-color: green;
                            color: white;
                        }
                        td{
                            font-size: 14pt;
                            background-color: #000066;
                            color: #CCCCCC;
                        }
                </style>
            </head>
            <body>
                <div>
                    <table border ='2'>
                        <tr>
                            <th>Índice</th>
                            <th>Nome</th>
                        </tr>
                        <tr>
                          <td>1</td>
                          <td>Paula</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Luisa</td>
                        </tr>
                    </table>
                </div>
            </body>
        </html>

Browser other questions tagged javascript html css html5 css3

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