Как найти таблицу в html

HTML Таблицы

Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента <table> парный блочный тег <tr> (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов <tr> вы добавите, столько строк в таблице и будет. Открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td> (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента <td> вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом </tr>.

Элемент <th> (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент <td>, однако его назначение — создание заголовка строки или столбца. Как правило, элемент <th> размещают в первой строке таблицы. Браузеры отображают текст в элементе <th> жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента <th> помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:

Граница таблицы

Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе
несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

<style>
  table {
    border-collapse: collapse;
  }
</style>

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS.
Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>.
Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

table {width: 100%;}

Объединение ячеек (colspan и rowspan)

Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки <th> или ячейки <td> объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

Объединение столбцов

Объединение столбцов достигается с помощью атрибута colspan в элементах <td> или <th> — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.

Объединение строк

Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:

Заголовок таблицы

Для создания заголовка или подписи таблицы используется парный тег <caption> (от англ. caption – подпись). Элемент <caption> предназначен для организации заголовка таблицы. Располагается сразу после тега <table>, но вне описания строки или ячейки.

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги <thead>, <tbody> и <tfoot>.
Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз
дания верхней шапки таблицы) используется тег <thead>. Заголовки таблицы
должны быть помещены в элемент <thead>, например:

<thead>
<tr><th>Заголовок 1</th><th>Заголовок 2< /th></tr>
</thead>

Основное содержимое (тело) таблицы должно находиться внутри элемента <tbody> (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег <tfoot> (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>.
Кроме логического группирования одной из причин использования элементов <thead> и <tfoot> является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (<thead>) и последнюю строку (<tfoot>), когда пользователь станет прокручивать вашу таблицу.

Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце таблицы.
Это исходит из того, что <tbody> может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> в коде прописывается перед элементом <tbody>.

Задачи

Таблицы в формате HTML выводят на экран данные с помощью строк и столбцов. В них может содержаться как обычный текст, так и изображения или видео. В раннюю эпоху интернета таким способом верстали даже полноценные веб-страницы.

Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.

Как создать таблицу

Каждая таблица в HTML-файле должна состоять из строк и столбцов, а ее создание заключается в одном простом теге – <table>.

Откройте HTML-документ и пропишите туда следующее:

<table></table>

Таким образом будет создана пустая таблица, в которой нет ни строк, ни столбцов – никакой информации. Тег <table> при этом является контейнером для элементов таблицы, и все они должны находиться внутри него.

Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:

<table>Моя первая таблица</table>

А вот как этот фрагмент отображается в браузере:

Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге <body>. Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.

Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег <style></style> и добавить в него следующее:

<style>

table {

   border: 1px solid grey;

}

</style>

У нас появится маленькая точка внизу:

Это и есть наша таблица, которая сейчас размером с крошку, и в ней до сих пор почему-то нет текста. Для решения этой проблемы нам помогут теги <tr>, <th> и <td> – подробнее о них поговорим далее.

Как создать строки таблицы

С помощью тега <tr> мы можем создать строку, в которой будут содержаться столбцы таблицы. Давайте добавим этот тег и посмотрим, что произойдет. Прописываем следующее:

<table>

      <tr>

         Моя первая таблица

      </tr>

</table>

В результате видим все ту же картину с маленькой точкой:

Так происходит, потому что каждая ячейка в такой строке устанавливается с помощью тега <td>. Если добавить его внутрь, то мы получим тот результат, к которому шли изначально – таблицу. Да, она еще не похожа на полноценную таблицу, но уже появляется рамка и есть первая строка с первым столбцом.

Пропишите следующий код:

<table>

       <tr>

                 <td>

                       Моя первая таблица

                 </td>

       </tr>

</table>

Получаем следующее:

Аналогичным образом давайте добавим еще несколько строк и столбцов. Для этого в теге <table> создадим 3 закрывающих тега <tr></tr> и внутрь добавим по 2 тега <td></td>:

<table>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               А вот и новая строка

                                   </td>

                                   <td>

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               Третья строка!

                                   </td>

                                   <td>

                                               И последний столбец!

                                   </td>

                        </tr>

</table>

Получаем следующее:

Как видите, мы потихоньку идем к образованию полноценной таблицы, но не хватает внутренних границ. Для этого нам нужно добавить обводку к тегу <td>, чтобы были видны границы строк и столбцов.

Просто прописываем в теге <style> пару строчек кода:

td {

   border: 1px solid grey;

}

Получаем результат:

Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег <style> для table:

table {

border-collapse: collapse;

}

И, вуаля, перед нами отображается полноценная таблица с привычными границами:

Для визуального удовлетворения давайте также растянем таблицу на всю ширину экрана – для этого необходимо задать width для тега <table>:

table {

   width: 100%;

}

Теперь наша таблица растянута:

Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.

Заголовок столбцов и строк, объединение ячеек

Мы также можем задать заголовок для столбцов и строк – в этом нам помогает тег <th>. В такой ячейке обычно хранится атрибут для всех данных строк или столбцов. А к содержимому таких ячеек применяется определенный стиль – выделение жирным шрифтом и выравнивание по центру ячейки.

Данный тег лучше всего применять для выделения ячейки-заголовка. Если необходимо визуальное форматирование, то воспользуйтесь стилями для обычных ячеек.

Давайте для примера добавим тег <th> с надписью «Заголовок» в еще одну строку таблицы:

<table>

                        <tr>

                                   <th>Заголовок</th>

                        </tr>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               А вот и новая строка

                                   </td>

                                   <td>

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               Третья строка!

                                   </td>

                                   <td>

                                               И последний столбец!

                                   </td>

                        </tr>

</table>

В итоге получаем следующее:

Обратите внимание, что заголовок выровнен не по всей таблице, а только по первому столбцу. Чтобы сделать его по центру – необходимо прописать дополнительный атрибут colspan, который объединяет столбцы. В нашем случае нужно связать два столбца, поэтому значение будет равно двум:

<tr>

<th colspan="2">Заголовок</th>

</tr>

Вот как это выглядит на экране:

Данный атрибут мы можем добавлять к любым столбцам. Также есть еще один атрибут, который объединяет не столбцы, а строки – rowspan. Прописывается он аналогичным образом. Для примера давайте совместим вторую и третью строки второго столбца:

<table>

                        <tr>

                                   <th colspan="2">Заголовок</th>

                        </tr>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr >

                                   <td >

                                               А вот и новая строка

                                   </td>

                                   <td rowspan="2">

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td rowspan="2">

                                               Третья строка!

                                   </td>

                                  

                        </tr>

</table>

Получаем следующее:

Обратите внимание, что я удалил из последнего столбца одну строку, чтобы получилось совместить вторую и третью строки. Так мы можем создавать правильно построенные таблицы без лишних полей. Это пригодится тогда, когда в двух столбцах разное количество строк.

Заголовок таблицы

С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега <caption>, а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.

Заголовок может потребоваться в следующих случаях:

• чтобы показать пользователям краткое содержимое таблицы – такой подход будет полезен, когда на странице много таблиц;
• тег влияет на оптимизацию страницы – его любят поисковики.

Давайте добавим <caption> в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:

<caption>Таблица обо всем</caption>

Получаем:

С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом <b>.

Группирование строк и столбцов таблицы

Тег <colgroup> создает структурную группу столбцов, выделяя логически объединенные ячейки. Он группирует один или несколько столбцов для единого форматирования, позволяя таким образом применять стили к столбцам, чтобы не повторять стили для каждой ячейки или строки.

Еще один важный тег – <col>.  Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.

Давайте добавим к уже существующей таблице данные теги:

<colgroup>

<col span="1" style="background:pink">

<col style="background-color:yellow"><!-- Задаем цвет фона для следующего столбца таблицы-->

</colgroup>

Получаем следующее:

Группирование строк и столбцов таблицы позволяет нам быстро задать нужные стили без их дублирования.

Тело таблицы

Тег <tbody> содержит основную часть информации и группирует главные части таблицы. Его можно использовать сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.

Тело таблицы располагается после заголовка <caption> и шапки <thead>.

Шапка и подвал таблицы

Тегом <thead> мы можем задать заголовочную секцию таблицы. Чаще всего речь идет о первой строке, содержащей заголовки столбцов. В нем для ячеек используется тег <th>. Контент в этой ячейке выравнивается по центру, а текст становится жирным.

Тег <tfoot> используется для группировки содержимого нижней части таблицы – его принято обозначать нижним колонтитулом таблицы. Выводится он после тега <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней – все зависит от браузера. Для ячеек в секции <tfoot> следует использовать тег <td>.

Общая сводка по HTML-таблицам

Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:

• <table> – тег, позволяющий создать контейнер таблицы;
• <tr> – тег для создания строки (ряда) таблицы, используемый совместно с <td> или <th>;
• <td> – тег обычной ячейки таблицы;
• <th> – тег ячейки-заголовка таблицы;
• <col> – тег, позволяющий создать колонки для таблицы;
• <colgroup> – тег, который группирует колонки;
• <thead> – тег для верхнего колонтитула таблицы;
• <tbody> – тег основной части таблицы;
• <tfoot> – тег для нижнего колонтитула таблицы;
• <caption> – используйте этот тег, чтобы задать общий заголовок для таблицы;
• colspan – показывает количество ячеек в строке для объединения по горизонтали;
• rowspan – показывает количество ячеек в столбце для объединения по вертикали;
• span – количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1;
• border – ширина границ таблицы в пикселях, по умолчанию: 0 – в таком случае обводка таблицы не видна;
• cellpadding – отступ от границ ячеек до их содержимого;
• cellspacing – отступ между границами ячеек.

Чтобы добавить визуальные эффекты, используйте CSS-стили – с их помощью можно как увеличить размер обводки границ, так и задать цвет фона, размер и шрифт текста.

Создание HTML-таблицы – это дело нескольких минут. Главное – разобраться с базовыми понятиями и попрактиковаться на нескольких примерах. В последующем создание таблицы не будет вызывать у вас никаких проблем.

В языке разметки HTML есть инструменты для укладывания материала в таблицы. Сейчас они используются ровно по назначению: если вам на странице нужна таблица с данными, вы ставите тег <table> и размечаете данные по смыслу. Но так было не всегда. 

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах. 

Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на <div>, потом придумали CSS Grid, и понеслось. Но начиналось всё именно с табличной вёрстки. 

👉 Сегодня мы вспомним былые времена и погрузимся в магию создания таблиц в HTML. Возможно, когда-то в жизни вам придётся поддерживать сайт, который верстали в 2000 году на таблицах, и вы вспомните эту статью, и скупая слеза покатится по вашей щеке. 

Как сделать таблицу в HTML

За таблицы в вёрстке отвечает такой набор тегов:

<!-- вся таблица хранится здесь -->
<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			<!-- первая ячейка в первой строке-->
		</td>
		<td>
			<!-- вторая ячейка в первой строке-->
		</td>
	</tr>
	<!-- закончилась первая строка -->
</table>

Теперь разберём каждый тег отдельно:

Сделаем простую таблицу из двух строк, по 3 ячейки в каждой. В коде это выглядит громоздко, но на деле всё получится компактно:

<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td>
			Привет!
		</td>
		<td>
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

Таким способом можно сделать таблицу любого размера — хоть 100 строк по 500 ячеек в каждой.

Обратите внимание, что браузер нарисовал таблицу невидимой. Это не всегда так. Раньше браузеры рисовали таблицы с чётко видимыми границами, и некоторые браузеры делают так до сих пор. Чтобы таблица выглядела одинаково у всех, смотрите следующий раздел. 

Настраиваем внешний вид

Внешний вид таблицы можно настроить стилями, как у любого другого объекта на странице: 

<table style="border-spacing : 10px; border-color : blue; border-style: solid;">

В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так:

<style>
table{
border-spacing:10px;
border-color:blue;
border-style:solid;
}
</style>

Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class="kakoi-to", а в стилях сказать table.kakoi-to {...} — и прописать в фигурных скобках все нужные параметры оформления. 

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

<!-- первая строка таблицы -->
<tr>
	<td>
		Первая ячейка в первой строке
	</td>
	<td style="background-color: yellow;">
		Привет!
	</td>
	<td style="background-color: yellow;">
		Это журнал «Код».
	</td>
</tr>

Или можно было бы сказать <td class="highlighted">, а в стилях прописать .highlighted{background-color:yellow;} — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript. 

Чтобы сделать видимые границы у всех ячеек, добавим параметр border:

<table border = 1 style=" border-spacing : 10px; border-color : blue; border-style: solid; ">

Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях. 

Видно, что между ячейками расстояние есть, а внутри ячеек текст как будто зажат. Чтобы дать тексту внутри ячеек подышать, используют padding: 

<style>
table td{padding:5px;}
</style>

Заголовки в таблице

За заголовок в таблице отвечает отдельный тег <th>:

<table style=" border-spacing : 10px; border-color : blue; border-style: solid; ">
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td style="background-color: yellow;">
			Привет!
		</td>
		<td style="background-color: yellow;">
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

Все заголовки по умолчанию выравниваются по центру. Если нужно прибить их к левому краю, как и остальное содержимое таблицы, используем стиль с выравниванием. Для этого оборачиваем заголовки в общий тег для заголовков и применяем такое:

<thead style="text-align: left;">
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
</thead>

Объединение ячеек

Если нужно, чтобы содержимое занимало сразу несколько ячеек, используют параметр colspan для горизонтальных ячеек и rowspan — для вертикальных. В качестве параметра для них просто указываем количество ячеек, которые нужно с ними объединить:

<!-- вся таблица хранится здесь -->
<table style=" border-spacing : 10px; border-color : blue; border-style: solid; ">
	<thead style="text-align: left;">
		<th>
			Первый заголовок
		</th>
		<th>
			Второй
		</th>
		<th>
			И третий
		</th>
	</thead>
	<!-- первая строка таблицы -->
	<tr>
		<td rowspan="2" >
			Объединили первые ячейки
		</td>
		<td colspan="2" style="background-color: yellow; text-align: center;">
			Привет! 
		</td>
		<!-- здесь раньше была третья ячейка первой строки, но мы её убрали, чтобы объединить ячейки -->
		
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

Что можно размещать в ячейках

Ячейки — это контейнеры для содержимого, куда можно класть всё:

Единственное, что нужно учитывать: если то, что вы вставляете, большого размера, то оно может порвать всю таблицу и не поместиться на экран:

<!-- вторая строка таблицы -->
<tr>
	<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
	<td>
		Подписывайтесь,
	</td>
	<td>
		<img src="https://thecode.media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg" width="100%">
	</td>
</tr>
<!-- закончилась вторая строка -->

Чтобы этого не было, можно задать общую ширину таблицы:

<table width="600px" style=" border-spacing : 10px; border-color : blue; border-style: solid; ">

И после этого указать, что картинка может занимать 100% доступной ширины ячейки, а не всего экрана:

<img src="https://thecode.media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg" width="100%">

Что дальше

В свое время таблицы были единственным способом сверстать что-то в два или три столбца на странице. Сейчас это уже давно не так, но ради любви к истории и искусству мы попробуем сверстать страницу на таблицах, чтобы вспомнить подвиги дедов.

Стей тюнед и всё такое. 

А если хотите научиться верстать по-современному, почитайте вот этот цикл: