На этом уроке мы научимся выводить на экран таблицу умножения и закрашивать её боковые стороны, диагонали и центральную ячейку с помощью PHP.
Задачи
- Объявить переменные $rows и $cols, обозначающие соответственно количество строк и столбцов таблицы.
- Вывести на экран таблицу умножения с $rows строк и $cols столбцов.
- Закрасить верхнюю и нижнюю линии таблицы розовым цветом.
- Закрасить правую и левую линии таблицы жёлтым цветом.
- Закрасить диагональные клетки таблицы. Одну диагональ закрасить оранжевым цветом, другую красным.
- Если диагональные клетки пересекаются в одной ячейке, выделить её светло-зелёным цветом.
Создаём таблицу умножения
Для начала объявим переменные $rows и $cols и добавим немного CSS, чтобы таблица смотрелась более наглядно:
<?php
$cols = 10;
$rows = 10;
?>
<style>
table { border: 0; }
td { padding: 5px; text-align: center; }
</style>Принцип вывода таблицы умножения несложный. Нужно создать 2 цикла: один перебирает строки, а другой ячейки. И внутри второго цикла мы просто умножаем текущий номер строки на текущий номер столбца и выводим полученное значение:
<?php
$rows = 5;
$cols = 5;
// Проходим по всем строкам
for ($tr = 1; $tr <= $rows; $tr++)
{
// Проходим по каждой ячейке строки
for($td = 1; $td <= $cols; $td++)
{
echo $td * $tr, ' | ';
}
echo '<br>';
}
?>1 | 2 | 3 | 4 | 5 |
2 | 4 | 6 | 8 | 10 |
3 | 6 | 9 | 12 | 15 |
4 | 8 | 12 | 16 | 20 |
5 | 10 | 15 | 20 | 25 |А теперь выведем эти значения внутри таблицы и добавим им белый фон, цвет которого затем будем менять:
<?php
$cols = 8;
$rows = 8;
?>
<style>
table { border: 0; }
td { padding: 5px; text-align: center; }
</style>
<table>
<?php
for ($tr = 1; $tr <= $rows; $tr++)
{
echo '<tr>';
for($td = 1; $td <= $cols; $td++)
{
$background = 'white';
echo '<td style="background-color:', $background, '">', $tr * $td, '</td>';
}
echo "</tr>";
}
?>
</table>На данном этапе наша таблица выглядит следующим образом:
Итак, сама таблица готова. Теперь нам осталось только менять значение переменной $background для каждой ячейки в зависимости от значений переменных $tr, $td, $rows и $cols.
Закрашиваем боковые ячейки
Как определить, является ли ячейка крайней слева или справа? Очень просто: если номер ячейки, лежащий в переменной $td, принимает значение 1 - значит это самая левая ячейка. Если же переменная $td равна количеству колонок (которое лежит в переменной $cols), значит это самая правая ячейка.
Исходя из этого, составим условие, при котором крайние слева и справа ячейки окрасятся в жёлтый цвет:
if($td === 1 or $td === $cols)
$background = 'yellow';
else
$background = 'white';Готово! С верхними и нижними ячейками тоже ничего сложного. Если номер строки $tr равен единице или количеству строк $rows - значит это одна из крайних ячеек. Дополним код ещё одним условием:
if($td === 1 or $td === $cols)
$background = 'yellow';
elseif($tr === 1 or $tr === $rows)
$background = 'pink';
else
$background = 'white';Отлично, теперь наша таблица выглядит следующим образом:
Закрашиваем диагональные ячейки
Для начала нам нужно добавить в код условие, согласно которому диагональные линии закрашиваются только для квадратных таблиц.
Потому что проблематично даже представить, как должна выглядеть закрашенная диагональ, к примеру, таблицы 5x12. Добавим это условие:
if($cols === $rows) {
// ...
}Перейдём к диагоналям. Начнём с той, что идёт от числа 1 направо вниз. Посмотрите на предыдущую картинку. Из неё следует, что мы должны закрасить числа 1, 4, 9, 16 и т.д. Видите ли вы какой-нибудь простой способ определить, является ли ячейка лежащей на этой диагонали?
Наверное вы уже догадались, что у всех этих ячеек совпадает номер столбца и номер строки. Добавим это условие в код:
if($cols === $rows) {
if($td === $tr)
$background = 'orange';
}
// Это условие предотвращает перезапись цвета для диагональных ячеек
if(!$background)
{
if($td === 1 or $td === $cols)
$background = 'yellow';
elseif($tr === 1 or $tr === $rows)
$background = 'pink';
else
$background = 'white';
}У ячеек второй диагонали схожесть чуть менее очевидная: сумма их координат равна количеству строк (да и столбцов), увеличенному на один. Проще говоря, $td + $tr === $cols + 1. Добавим это условие в код:
if($cols === $rows)
{
if($td === $tr)
$background = 'orange';
}
elseif($td + $tr === $cols + 1)
$background = 'red';Теперь наша таблица выглядит следующим образом при чётном и нечётном количестве элементов:
Остался последний штрих - выделение особым цветом центральной ячейки.
Закрашиваем центральные ячейки
Для определения центральной ячейки мы можем взять за основу код поиска элементов первой диагонали и дополнить его парой условий:
1. Таблица должна иметь нечётное количеством строк и столбцов
2. Ячейка быть центральной
Определить чётность таблицы можно с помощью оператора %, возвращающего остаток от деления.
Логика следующая: мы пытаемся разделить количество столбцов или строк на 2 и если остаток от деления есть (например 4 делится на 2 без остатка, а после деления 5 на 2 остаётся остаток 1) - значит таблица с нечётным количеством элементов. В коде это будет выглядеть так:
if($cols % 2)Осталось определить центральный элемент. Посмотрим на таблицу ещё раз. Если в таблице 5 строк, средней будет третья. Если строк 7, средней будет 4-ая и т.д.
В итоге мы получаем формулу ceil($cols / 2), т.е. количество столбцов или строк делим на 2 и округляем в большую сторону. Итоговый код будет таким:
if($cols === $rows)
{
if($td === $tr)
{
if(($cols % 2) and $td == ceil($cols / 2))
$background = 'chartreuse';
else
$background = 'orange';
}
elseif($tr + $td === $cols + 1)
$background = 'red';
}Готово! Теперь средний элемент нечётных таблиц выделяется светло-зелёным цветом, а в чётных таблицах всё осталось по-старому.
Готовый код
<?php
$cols = 10;
$rows = 10;
?>
<style>
table { border: 0; }
td { padding: 5px; text-align: center; }
</style>
<table>
<?php
for ($tr = 1; $tr <= $rows; $tr++)
{
echo '<tr>';
for($td = 1; $td <= $cols; $td++)
{
$background = '';
if($cols === $rows)
{
if($td === $tr)
{
if(($cols % 2) and $td == ceil($cols / 2))
$background = 'chartreuse';
else
$background = 'orange';
}
elseif($tr + $td === $cols + 1)
$background = 'red';
}
if(!$background)
{
if($td === 1 or $td === $cols)
$background = 'yellow';
elseif($tr === 1 or $tr === $rows)
$background = 'pink';
else
$background = 'white';
}
echo '<td style="background-color:', $background, '">', $tr * $td, '</td>';
}
echo "</tr>";
}
?>
</table>