Этот урок набрал набрал достаточно большое количество
комментариев и дальнейшее его комментирование отключено.
Если вы хотели убедиться в правильности выполнения ДЗ или у вас возник вопрос по уроку,
посмотрите ранее добавленные комментарии, кликнув по кнопке ниже. Скорее всего вы найдете там то, что искали.
Если это не помогло - задайте вопрос в чате в телеграме - https://t.me/php_zone
В одном из видеокурсов по html человек говорил о том, что сейчас таблицы в html не актуальны тк таблицы намного проще создавать в css, человек был прав?
Да, в современной вёрстке для создания колонок на сайте действительно используется CSS. Однако таблицы всё равно стоит знать и понимать - они используются на сайте когда нужно вывести именно таблицу с какими-либо данными. Помимо этого таблицы также используются в вёрстке email-сообщений, так как там нет поддержки CSS.
На данном сайте нет полной информации о современной вёрстке, но если вы собираетесь становиться PHP-разработчиком, то оно вам и не надо, достаточно знать лишь основы. В остальном этим должны заниматься frontend-разработчики. Если вам интересно это направление, то вам нужно будет после этого курса самостоятельно найти другой источник информации помимо моего сайта, где будут обучать именно фронтенду.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример таблицы</title>
<style>
table {
border: 5px dashed red; /* Параметры границы - толщина, стиль, цвет */
border-collapse: collapse; /* Соприкасающиеся границы склеиваются */
}
td {
padding: 35px; /* Поля вокруг текста */
border: 2px groove blue;
}
.myTable { /* Стили для класса myTable */
margin: auto; /* Отступ от края до границы родителя */
text-align: left; /* Горизонтальное выравнивание текста в пределах элемента */
width: 100%; /* Ширина границы в % от ширины окна*/
height: 470px; /* Абсолютная высота в пикселах */
background-color: aliceblue; /* Цвет фона */
}
.px30 { /* Стили класса px30 */
width: 33%;
}
.px25 { /* Стили класса px25 */
width: 10%;
}
</style>
</head>
<body>
<table class="myTable">
<tr>
<td class="px30">Инфа об услуге</td>
<td class="px25">Цена услуги</td>
<td class="px30">Комментарий</td>
</tr>
<tr>
<td>Шью валенки и валяю портянки</td>
<td>от 50 р. до $50000</td>
<td>Хорошие портянки дороже хреновых валенок</td>
</tr>
<tr>
<td>Оформить первую строку заголовком не получилось</td>
<td>Пару часов на стили более чем мало</td>
<td>Лиха беда начало</td>
</tr>
</table>
</body>
</html>
Оформляйте код (в редакторе комментариев самая первая кнопка).
Нажмите на карандашик и поправьте, пожалуйста. А потом ответьте мне на этот комментарий. Проверю домашку после этого.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="цветы, деревья, кустарники, происхождение, садоводство, выращивание">
<meta name="description" content="Здесь Вы найдете информацию о разных видах растений, краткую историю их происхождения а также советы по их выращиванию.">
<title>Яблоко от яблони - Виды растений, их история, садоводство</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img/apple.jpg" alt="apple tree" width="200" height="130">
<h1>Мир растений</h1>
<p class="myClass">
Для всех тех, кто кроме котиков и собачек обожает или даже предпочитает мир "неподвижных питомцев", тоесть <strong>растений</strong>, мы создали наш сайт. Тут собрана информация о разновидностях растений, их "привычках", <em>история происхождения</em>, а также все самые главные секреты по их ухаживанью.
</p>
<ol>
<li>кустарники</li>
<ul>
<li>смородина</li>
<li>малина</li>
<a href="file:///C:/Users/Theodoros/Desktop/book1.html" target="_blank">История малины<a/>
</ul>
<li>деревья</li>
<li>цветы</li>
</ol>
<hr>
<h2>История растений</h2>
<br>
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<p>
<table class="myTable">
<tr>
<td rowspan="2">Продукция</td>
<td colspan="3">Налоговая ставка</td>
</tr>
<tr>
<td>с 01.01 по 31.01</td>
<td>с 01.01 по 31.01</td>
<td>с 01.01.2015<t/td>
</tr>
<tr>
<td>Дизельное топливо</td>
<td>3450 руб.за 1 тонну</td>
<td>4150 руб.за 1 тонну</td>
<td>3950 руб.за 1 тонну</td>
</tr>
</table>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Tesla, Тесла, электромобиль, electric car, чистая энергия">
<meta name="description" content="Производитель электромобилей и решений для хранения электрической энергии">
<title>Tesla</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p><img src="img/tesla.jpg" height="150" width="200"><b>Tesla</b> (ранее Tesla Motors) - американская компания,
производитель электромобилей
и (через свой филиал SolarCity) решений для хранения электрической энергии. Компания была основана в июле
2003 года Мартином Эберхардом и Марком Тарпеннингом, но нынешнее руководство компании называют сооснователями
Илона Маска, Джеффри Брайана Страубела и Иэна Райта.</p>
<ol>
<li>
<h3>Бизнес-модель</h3></li>
В отличие от большинства автопроизводителей, <b>Tesla</b> не продаёт автомобили через независимых дилеров. Как
правило,
салоны Tesla представляют собой лишь демонстрационные площадки, покупка осуществляется непосредственно через
сайт <b>Tesla</b>. Это отчасти схоже с моделью продаж Apple. В большинстве штатов США прямые продажи автомобилей от
производителей и продажи через принадлежащих им дилеров ограничены или запрещены. Tesla пришлось столкнуться с
судебными исками о запрете прямых продаж. В некоторых штатах (Виргиния, Техас) компания проиграла дела, и продажи
<b>Tesla</b> были запрещены.
<li>
<h3>Показатели деятельности</h3></li><br>
В 2020 году компания произвела более 500 тыс. автомобилей.
<img src="img/value.png" align="middle">
<li>
<h3>Производственные мощности <a href="Factory.html">Подробнее</a></h3></li>
<ul>
<li>США</li>
<li>Нидерланды</li>
<li>Китай</li>
<li>Германия</li>
</ul>
<li><h3>Модельный ряд <a href="Model.html">Подробнее</a></h3></li>
</ol>
<table class="table">
<tr>
<td>Tesla Roadster<br><img src="img/roadster1.jpg" height="210px" width="auto"></td>
<td>Tesla Model S<br><img src="img/model%20s.jpg" height="210px" width="auto"></td>
<td>Tesla Model X<br><img src="img/model%20x.jpg" height="210px" width="auto"></td>
</tr>
<tr>
<td>Tesla 3<br><img src="img/model%203.jpg" height="210px" width="auto"></td>
<td>Model Y<br><img src="img/model%20y.jpg" height="210px" width="auto"></td>
<td>Tesla Roadster 2.0<br><img src="img/roadster.jpg" height="210px" width="auto"></td>
</tr>
<tr>
<td>Tesla Semi<br><img src="img/semi.jpg" height="210px" width="auto"></td>
<td colspan="2">Tesla Cybertruck<br><img src="img/cyber.jpg" height="210px" width="auto"></td>
</tr>
</table>
</body>
</html>
Поправьте, пожалуйста : там, где вы рассказываете про объединение ячеек, первое предложение после заголовка "Зачастую несколько ячеек нужно объеденить (надо объедИнить) в одну", в первом предложении про rowspan такая же описка. Ни в коем случае не придирки, просто хочется, чтобы на этом сайте всё было идеально)
Ой чёта изи))
Норм))
Отлично!
Супер!
Что в голову пришло, то сделал xD
Норм табличка
Ок, только нужно было 3*2 =)
Супер!
Почему три строки не отображаются?
Какие 3 строки?
Супер!
Отлично
В одном из видеокурсов по html человек говорил о том, что сейчас таблицы в html не актуальны тк таблицы намного проще создавать в css, человек был прав?
Да, в современной вёрстке для создания колонок на сайте действительно используется CSS. Однако таблицы всё равно стоит знать и понимать - они используются на сайте когда нужно вывести именно таблицу с какими-либо данными. Помимо этого таблицы также используются в вёрстке email-сообщений, так как там нет поддержки CSS.
На данном сайте нет полной информации о современной вёрстке, но если вы собираетесь становиться PHP-разработчиком, то оно вам и не надо, достаточно знать лишь основы. В остальном этим должны заниматься frontend-разработчики. Если вам интересно это направление, то вам нужно будет после этого курса самостоятельно найти другой источник информации помимо моего сайта, где будут обучать именно фронтенду.
Отлично
Отлично
Отлично
Отлично
а это и правда не сложно
Отлично
Отличная табличка, но с опечатками в слове Accaunt
Спасибо. Опечатки исправил. Идём дальше.
Мне кажется, это чтоб оптимизировано было под любые разрешения, в том числе и для мобилок, чтобы на всю ширину растягивалось
В следующих уроках узнаете ответ)
Исправил
Всё ок, только стили нужно поместить в один тег <style>
Артём, а где описание класса greenYellowBackground ? в блоке style его нет
Саша, спасибо за обратную связь. Этот класс на самом деле был лишним. Урок исправил.
Проблема с форматированием. Делайте отступы как в уроках.
Тут ошибка
Отлично
Оформляйте код (в редакторе комментариев самая первая кнопка).
Нажмите на карандашик и поправьте, пожалуйста. А потом ответьте мне на этот комментарий. Проверю домашку после этого.
Отлично. Только обычный текст не надо оформлять как код)
Отлично!
Ошибка в теге title
Таблица - ОК
Супер!
Отлично
А ДЗ?
Так я таблицу создал, как и было написано
А про ширину в 100% там ещё было, видимо не увидели под статьёй. Что думаете по этому поводу?
Ах, да. Увидел свою ошибку, извиняюсь.
Расписание занятий, хех)
А ещё?)
Теги пишутся маленькими буквами
Отлично
Отлично. Отступы только надо поправить местами
Отличный пример!
Отлично!
Отлично
Супер!
Только не понял как поменять ширину отдельного столбца при условии, что в нём есть объединённые ячейки.
index.html
style.css
Отлично
Ок)
Супер!
Отлично
а вот выставить таблицу в центр, через .my Table, не получается
А почему style внутри таблицы?
Фууу,спс. Получилось! Не внимательность и комп.безграмотность сильно тормозят обучение.
а как отодвинуть табл от левого края на заданную величину?
margin-left или padding-left. Погуглить про них)
Нет слов на сайт
##style.css
Внутри тегов ul и li не размещаются абзацы
Спасибо за уточнение!Поправила.
Как-то чертовски приятно было сделать ту табличку без подглядывания) Стили в head положил, так удобнее в комментариях писать.
Отлично!
Поправьте, пожалуйста : там, где вы рассказываете про объединение ячеек, первое предложение после заголовка "Зачастую несколько ячеек нужно объеденить (надо объедИнить) в одну", в первом предложении про rowspan такая же описка. Ни в коем случае не придирки, просто хочется, чтобы на этом сайте всё было идеально)
Спасибо за замечание. Исправил)