1
resposta

[Projeto] Alteração de cor conforme variável

Boa tarde. Alguém por gentileza poderia dizer como faço para alterar a cor de um texto variável dentro de uma tabela HTML.

Já tentei dessas formulas e não consegui:

<body style='color: red;'>Texto em vermelho </body><br><body style='color: green;'>Texto em verde</body>"

<style>
      table {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
      }
      table th {
        background-color: #800080;
        color: #FFFFFF;
        text-align: center;
        border: 1px solid black;
      }
      table td {
        text-align: left;
        border: 1px solid black;
      }
</style>
1 resposta

Olá Sidney!

Para alterar a cor de um texto dentro de uma tabela HTML, você pode usar o CSS diretamente nas células da tabela ou aplicar classes específicas para cada condição de cor que você deseja. Como nesse código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }
        table th {
            background-color: #800080;
            color: #FFFFFF;
            text-align: center;
            border: 1px solid black;
        }
        table td {
            text-align: left;
            border: 1px solid black;
        }
        .red-text {
            color: red;
        }
        .green-text {
            color: green;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Nome</th>
            <th>Status</th>
        </tr>
        <tr>
            <td>Item 1</td>
            <td class="red-text">Texto em vermelho</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td class="green-text">Texto em verde</td>
        </tr>
    </table>
</body>
</html>

Neste exemplo, eu criei classes CSS chamadas .red-text e .green-text para aplicar as cores vermelha e verde, respectivamente. Você pode então aplicar essas classes às células da tabela que contêm o texto que você deseja colorir. Isso te dá flexibilidade para alterar as cores conforme a variável que você está manipulando.

Ficou assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado, conte sempre com o fórum da alura, abraços!