Стиль таблицы в CSS

Question

В настоящее время у меня есть небольшая HTML-страница со следующими кодами HTML / CSS внутри.

<table style="width: 300px;">
    <tr style="height: 120px;">
        <td width="width: 100px;">
            <img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;">
            <img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" />
        </td>
        <td width="width: 200px;">
            aaaa bbb  cccc  ddddd
            <h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2>
        </td>
    </tr>
</table>

Текущий вывод:

( Живой пример здесь: http://www.sobafire.com, под правой стороной ползунка.)

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

1. Текст вверху (aaa bbb ...) должен быть центрирован.Кроме того, он должен автоматически центрироваться, если текст длинный.(Он не должен идти вверх или вниз, он должен идти вверх на% 50, а вниз на% 50.)
2. Изображение "Score" со звездами имеет цвет фона, который равен "# 0c0c0c".Это должен быть цвет фона всей нижней области, включая «Анил написал».текст.
3. «Анил написал».текст должен быть выровнен по правой стороне.

Я буду рад, если вы поможете мне в этом случае.

Ps.В текущей таблице будет 3x TR, а не один такой.Это не будет иметь никакого значения, но только примечание.

Ps 2. Добавлен живой пример для пользователей, которые хотели бы видеть его вживую.

Answer 1

1. Используйте два TR для этого, первая строка имеет основное изображение, а "aaaa bbb cccc ddddd" Вторая строка имеет звезды и информацию "Anil wrote", вам, вероятно, понадобится rowspan = 2 для первого столбца,Извините, забудьте о диапазоне строк.

Тогда, если у вас есть дополнительные строки, просто добавьте их в конце, чтобы у вас было 4x TR, а не 3.

1. Переместите все свои элементы стиля в таблицу стилей CSS

2. В общем, div - лучший выбор для разметки, но вы найдете различные точки зрения на эту тему.Таблицы следует использовать для табличных данных, а не для макета.

Harv

Answer 2

Я бы предложил вам добавить еще <tr> и <td> и использовать valign:xxx; и align:xxx;

CSS на div и span будет работать нормально

Answer 3

Вам необходимо добавить еще один <tr>, содержащий два td, один с рейтингом и один с битом "Анил написал".

тогда вы можете добавить text-align: center к комментарию td