HTML верстка. Урок 6: Заполнение ячейки News

Займемся ячейкой News. Нужно, чтобы в ней располагались:

1. Блоки с текстом (те, которые с серой окантовкой).
2. Блок с заголовком ":: NEWS".

Сделаем эти блоки в виде трех таблиц. Первая и третья таблицы будут иметь "зазор" между ячейками (назовем их NewsItem) в 5 пкс. В HTML это достигается с помощью <table cellspacing="5">

В CSS единственный аналог этой записи: table {border-collapse: separate; border-spacing: 5px;}, но он не работает в IE - в нем расстояние между ячейками при border-collapse: separate всегда будет 2 пкс, какой бы border-spacing вы не прописали. Так что воспользуемся параметром cellspacing.

У ячеек NewsItem будет серая окантовка толщиной 1 пкс и фон в виде градиента от серого к белому. Текст в них будет выравниваться по ширине. Для заголовка и для ссылки >> в конце каждого текста я указала стиль текста. Вот html-код первой таблицы:

index.html

<table cellspacing="5" class="newstable">
<tbody>
<tr>
 	<td class="newsitem">
    <h2 class="h_red">Contact information</h2>
    <Lorem ipsum dolor sit amet... <a href="">>></a>
    </td>
</tr>
</tbody>
</table>

style.css

table.newstable {
width: 100%;}

td.newsitem {
background-image: url(newsitem_bg.jpg);
background-repeat: repeat-x;
border: 1px solid silver;
padding: 10px;
text-align: justify;}

h2.hdr2 {
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
color: #c63c3c;
margin-bottom: 7px;}

a {text-decoration: none;
color: #c63c3c;}

Вторая таблица будет содержать всего одну ячейку, которая будет использовать созданный в уроке 3 стиль "hdr" (для того, чтобы вставить точки перед "News"):

index.html

<table class="hdrtab">
<tbody>
<tr>
    <td class="hdr">News</td>
</tr>
</tbody>
</table>

style.css

table.hdrtab {
background-image: url(hdrtab_bg.jpg);
background-color: #dce1e9;
height: 37px;
width: 100%;
border-collapse: collapse;}

Третью таблицу вы можете сделать сами по аналогии с первой, вставив ее после таблицы hdrtab и добавив еще 2 ячейки.

Чтобы содержимое ячейки News не выходило за серую вертикальную линию (она же - фон News), сделаем отступ от правой границы 6 пкс.

td.news {
padding-right: 6px;}

Ячейка News заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу