Моя дорога в изучении HTML, PHP, CSS и MySQL

Украшаем сайт


Здесь я буду описывать, как получить те "украшения", которые применила сама при создании какого-либо сайта. Например, при создании сайта для кафе мне захотелось содержимое расположить в таблице с закруглёнными углами. На странице с меню хорошо бы при клике на фото увидеть его увеличенным на этой же странице и без дополнительного файла. Так и сделала.

1. Закругление углов таблиц без графики

В HTML пишем:
<table class="tableR" style="border-color: #c357b0; background-color: #fff; width: 70%; text-align: center; margin-left: auto; margin-right: auto;" cellpadding="10" cellspacing="2">
<tr>
<td>Здесь будет содержимое таблицы:<br />тексты<br />изображения</td>
</tr>
</table>

В css пишем:
.tableR {
border-spacing: 0;
border: 4px solid;
border-radius: 30px;
}
.tableR td, .tableR th {
padding: 10px;
border-left: none;
border-top: none;
}
.tableR th {
background: #fff5d7;
border-top: none;
}
.tableR td:first-child, .tableR th:first-child {
border-left: none;
}
.tableR th:first-child {
border-top-left-radius: 10px;
}
.tableR th:last-child {
border-top-right-radius: 10px;
}

По данному коду получили таблицу, у которой один столбец и одна строка. Если строк и столбцов будет более, то, судя по коду, никаких границ мы не увидим.

Здесь будет содержимое таблицы

Вот таблица с двумя строками и тремя столбцами:

1 строка, 1 столбец 1 строка, 2 столбец 1 строка, 3 столбец
2 строка, 1 столбец 2 строка, 2 столбец 2 строка, 3 столбец







Copyright © 2015. Хайманова Татьяна Яковлевна. Все права защищены.