Таблица умножения с выборочным закрашиванием ячеек

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

Примеры выводимой таблицы умножения при указании разных размеров
Оглавление
Задачи:

1. Объявить переменные $rows и $cols, обозначающие соответственно количество строк и столбцов таблицы.
2. Вывести на экран таблицу умножения с $rows строк и $cols столбцов.
3. Закрасить верхнюю и нижнюю линии таблицы розовым цветом.
4. Закрасить правую и левую линии таблицы жёлтым цветом.
5. Закрасить диагональные клетки таблицы. Одну диагональ закрасить оранжевым цветом, другую красным.
6. Если диагональные клетки пересекаются в одной ячейке, выделить её светло-зелёным цветом.

Создаём таблицу умножения

Для начала объявим переменные $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>

На данном этапе наша таблица выглядит следующим образом:

Готовая таблица умножения 8x8 на белом фоне

Итак, сама таблица готова. Теперь нам осталось только менять значение переменной $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';
}

Готово! Теперь средний элемент нечётных таблиц выделяется светло-зелёным цветом, а в чётных таблицах всё осталось по-старому.

3 таблицы умножения с закрашенными боковыми ячейками, диагоналями и центральной ячейкой

Готовый код

<?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>