Как задать цвет фона фона в CSS

Question

Я хочу указать цвет фона для HTML с помощью CSS. Если мой foobar.css файл

back { 
    background-color: #808080; 
} 

и мой index.html является

<link href="foobar.css"> 

<p><back>foo</back></p> 
<p><back>foobar</back></p> 

, то это не работает отлично: да линии имеют фон, но фон распространяется только на длину линии, так что зазубренным на правая сторона, а фон не покрывает пространство между линиями.

Как это сделать, чтобы фон покрывал весь прямоугольник вокруг абзацев?

Я попытался foobar.css как

table { 
    background-color: #808080; 
} 

и затем ссылаться, что в index.html как

<table> 
<p>foo</p> 
<p>foobar</p> 
</table> 

, но это полностью игнорируется.

Answer 1

Надежда это решает ваш isuue

<table> 
     <tr> 
      <td> 
       <p>foo</p> 
       <p>foobar</p> 
      </td> 
     </tr> 
    </table> 
    <style> 
     table{background-color:red;} 
    </style> 

Answer 2

Это происходит потому, что <table> вы пишете имеет неправильные теги внутри. Тег <table> должен состоять из N <tr> (строк), а <tr> может содержать N <td> (ячейки).

Это код, который вы должны использовать.

<table> 
    <tr> 
    <td>foo</td> 
    </tr> 
    <tr> 
    <td>foobar</td> 
    </tr> 
</table> 

Вот полное описание <table> элемента и его возможное содержание: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Answer 3

Выглядит хорошо для меня так долго, как вы используете правильные элементы в таблице.

HTML

<table> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table> 

CSS

table { 
    background-color: #808080; 
} 

Fiddle

Update

Вопрос от оригинального плаката: «Хорошо, но ... если я это делать, а не просто эту таблицу, но все таблицы в моем H TML будет иметь черный фон. Как это сделать, только этот? »

В этом случае вы хотите добавить идентификатор в свою таблицу, а затем создать правило CSS, соответствующее этому идентификатору.

HTML

<table id="my-table"> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table> 

CSS

#my-table { 
    background-color: #808080; 
} 

Fiddle

Answer 4

При использовании неопределенный тег как <back>, браузеры будут относиться к нему как открытие неопределенного элемента, который имеет встроенный рендеринга (display: inline в CSS). Это означает, что любой фон, установленный на нем, будет охватывать только ширину текста. Более того, эти элементы находятся внутри элементов p, а элементы p по умолчанию имеют верхнее и нижнее поле, а фоны внутреннего элемента не распространяются на эту область поля.

Чтобы задать фон для прямоугольника, который занимает доступную ширину, используйте div элемент в качестве оболочки:

.foo { background-color: #808080; }

<div class="foo"> 
 
<p><back>foo</back></p> 
 
<p><back>foobar</back></p> 
 
</div>

Там нет необходимости в таблице здесь. Вам понадобится таблица, только если бы мы жили в середине 1990-х годов, когда единственным способом установить цвет фона в блоке было использование таблицы с одной ячейкой и атрибута bgcolor.