|
|
Моя дорога в изучении 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 столбец |
|
|
