HTML Первый столбец мудрый центр окраски и выравнивания - PullRequest
Новая
       1

HTML Первый столбец мудрый центр окраски и выравнивания

0 голосов
/ 14 октября 2018

enter image description here У меня есть таблица под таблицей HTML, и я пытаюсь сказать, что "Цветной заголовок таблицы" должен отображать другой цвет в этом примере, скажем, синий.а Питер, Лоис, Джо, Кливленд должны окрашиваться в зеленый цвет (то же самое, что и формат сбережений FistName LastName)

Может ли что-нибудь помочь мне достичь.Ниже приведен код, который я пробовал до сих пор 

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: center;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<table align="center">
   <tr>
      <th>Colored Table Header</th>
   </tr>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 14 октября 2018

Представляя <thead>, <tbody> и colspan (диапазон столбцов) в <th> (заголовок таблицы), также измените <td> на <th> для фона зеленого цвета: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table align="center">
  <thead>
   <tr>
      <th colspan=3>Colored Table Header</th>
   </tr>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>Peter</th>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <th>Lois</th>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <th>Joe</th>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <th>Cleveland</th>
    <td>Brown</td>
    <td>$250</td>
</tr>
  </tbody>
</table>

</body>
</html>

css: 

thead tr:first-child th {
  text-align:center;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}

Кодовый стол Html: https://codepen.io/carolmckayau/pen/rqGjXE

0 голосов
/ 14 октября 2018 

<!DOCTYPE html>
<html>
<head>
<title>coloured column</title>
<style>
table, th, td {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: center;
    padding: 8px;
}


th {
background-color:yellow;
    color: black;
}
</style>
</head>
<body>

<table>
  <colgroup>
    <col style="background-color:yellow">
  </colgroup>
  <tr>
  <th colspan=3 style="background-color:orange">Coloured Table Header</th>
  </tr>

  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>



</table>

</body>
</html>

Проверьте это, и если вы хотите внести в него больше изменений, но все еще в замешательстве, оставьте комментарий ниже.для более подробной информации посетите здесь .Я надеюсь, что это решит вашу проблему.

0 голосов
/ 14 октября 2018

Вы можете создать разные классы для своих цветов и просто добавить их в атрибут class = ""

Так что если у нас есть класс 

.green{
background: green;
}

<td class="green">name</td>

Или мы могли бы просто использовать bgcolorатрибут 

<td bgcolor="#xxxxx"></>td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...