Отображение CSS таблицей

[nash17]

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

Мне надо что бы это была таблица из двух колонок, тоесть первый стиль первая колонка, второй стиль вторая колонка

Прикладываю отображение кода на сайте.

[Лубышев]

не читабельно.

[nash17]

спасибо за быстрый ответ подправил

[Лубышев]

Первый и последний элементы:
http://htmlbook.ru/css/first-child
http://htmlbook.ru/css/last-child

.extra_fields div:first-child{стили первого элемента;}
.extra_fields div:last-child{стили последнего элемента;}

есть второй вариант: четный не четный
http://htmlbook.ru/css/nth-child

.extra_fields div:nth-child(odd){стили нечетного элемента;}
.extra_fields div:nth-child(even){стили четного элемента;}

то же самое только по номеру элемента:

.extra_fields div:nth-child(1){стили первого элемента;}
.extra_fields div:nth-child(2){стили второго элемента;}
.extra_fields div:nth-child(3){стили третьего элемента;}
.extra_fields div:nth-child(4){стили четвертого элемента;}
.extra_fields div:nth-child(5){стили пятого элемента;}
.extra_fields div:nth-child(6){стили шестого элемента;}

[Naive]

Семантически православно в данном случае использовать список определений

<style>
.extra_fields_name {
  clear:left;
  float:left;
  width:50%;
}
.extra_fields_value {
  float:left;
  width:50%;
}
</style>
<dl class="extra_fields">
  <dt class="extra_fields_name">Мощность двигателя:</dt>
  <dd class="extra_fields_value">217(295)</dd>
  ...
</dl>

Лубышев, есть же классы для внутренних блоков)

[Лубышев]

Семантически православно в данном случае использовать список определений

как я понял афтор не может подобраться к структуре, поэтому я предложил вариант решения через css без затрагивания структур

[Лубышев]

ох, увидел обновление изображения.... сорри что не правильно понял задачу....
вариант Naive отображает решение вашей проблемы

[nash17]

спасибо за ответы, в стиле прописал такой код

.extra_fields{
    border: 1px solid green; /* Рамка вокруг таблицы */
}
.extra_fields_name {
  clear:left;
  float:left;
  width:80%;
}
.extra_fields_value {
  float:right;
  width:20%;
}

но во второй колонке пошло смещение на уровень ниже
последняя цифра вообще вылетела с таблички .....
может двоеточие мешает?
прикладываю скрин
не могу найти в интернета, за что отвечает clear:left; ?

[nash17]

и еще вопрос, что означает эта строка в стилях?

.extra_fields div{
}

[nash17]

парни посмотрите пожалуйста
методом научного тыка пришел к такому коду

.extra_fields{
    border: 1px solid green; /* Рамка вокруг таблицы */
	background: #e5ebd9; /* Цвет фона левой колонки */
}
.extra_fields_name {
	width:85%; /* Ширина таблицы */
	font-weight: bold; /* Жирным */
	color: green; /* Цвет текста */
    border: 0px solid black; /* Рамка вокруг таблицы */
	background: #e6ecdb; /* Цвет фона левой колонки */
}
.extra_fields_value {
    float:right;
    width:15%;
}

отображение правильное, тоесть так как я хотел, вопрос насколько правильно такой код использовать?