2014-09-21 5 views
-2
<html> 
<font face = "arial"> 
<style> 
#periodictable { 
    position: static; 
    border-top: : solid red 1pt; 
    border-right:solid red 1pt; 
    border-bottom:solid red 1pt; 
    border-left:solid red 1pt; 
} 
.metalloid { 
    background-color : #AF9B60; 
} 
.metal { 
    background-color: #C0C0C0; 
} 
</style> 
<body> 
<table width = "202" height = "211"> 
<div id = "periodictable";> 
<tr> 
    <td bgcolor = #AF9B60><div class = "metalloid"><center>B</center></div></td> 
    <td><center>C</center></td> 
    <td><center>N</center></td> 
</tr> 
<tr> 
    <td><div class = "metal"><center>Al</center></div></td> 
    <td bgcolor = #AF9B60><div class = "metalloid"><center>Si</center></div></td> 
    <td><center>P</center></td> 
</tr> 
<tr> 
    <td><div class = "metal"><center>Ga</center></div></td> 
    <td><div class = "metalloid"><center>Ge</center></div></td> 
    <td><div class = "metalloid"><center>As</center></div></td> 
</tr> 
</div> 
</table> 
</font> 
</body> 
</html> 

Итак, в основном для моего класса HTML/CSS для highschool мне пришлось создать таблицу с использованием CSS. При назначении требуется использовать классы и идентификаторы. С моим кодом я назначил класс и вызвал его с помощью инструкции div. Но при этом только цвет текста изменяется на назначенный цвет. Мне нужно для блока целых клеток, чтобы быть изменены, как показано на следующем рисунке:Изменение цвета фона ячейки с использованием класса

sample

+0

1) К чему вы применили класс и каково его содержание? 2) Какой элемент HTML является «блоком ячейки», на который вы действительно хотите повлиять, и назначил ли вам класс? Если вы можете ответить на эти вопросы, вы исправите свою проблему. – mc01

+0

['

'] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) и [''] (https://developer.mozilla.org/en- Элементы US/docs/Web/HTML/Element/font) устарели или устарели; атрибут ['bgcolor'] (http://www.w3.org/TR/html4/present/graphics.html#adef-bgcolor) аналогичным образом. –

ответ

0

Вы должны дать <td> класс, а затем изменить его background-color атрибут, то <div> только как большой, как ваш css определяет или элементы внутри - не родительский элемент.

например ..

.metal { 
    text-align: center; 
    background: silver; 
} 

..

<tr> 
    <td class="metal">Ga</td> 
</tr> 

Поскольку это в основном отвечать на свою домашнюю работу, пожалуйста, попробуйте и понять для себя, почему это работает.

Смежные вопросы