Format table color CSS

Question

Format table color CSS

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I would like my table to look like this.

ButwhenIaddthecontenttoit,itlookslikeI'mnotabletoleaveitasthetableabove.

functionlistarProdutos(){varconteudo="<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 html5 css css3

asked by anonymous 28.09.2017 / 22:00

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>

So?

28.09.2017 / 22:09

Create a 2D vector from a 1D vector in Python Perform function at every given time [closed]

score 1 · Accepted Answer

Just use this code so your table will have the different heading of 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>