Что такое таблица? Он состоит из клеточных клеток. В таблице число <td> зависит от количества ячеек, обернутых в каждую строку <tr>! Кроме того, в таблице по умолчанию нет линии таблицы, отображаемой в браузере до добавления стиля CSS;
Общие методы написания таблицы В HTML: A. <Tr>… </tr>: ряд таблицы, есть несколько пар TR, и есть несколько строк; B. <Td>… </td>: ячейка таблицы, которая содержит несколько пар <td>… </td>, что означает, что есть несколько столбцов подряд; C. <Th>… </th>: ячейка в голове таблицы, заголовок таблицы и текст жирный и отображаемый в центре; D. <Table Summary = Таблица Введение Текст>/*Содержание резюме не будет отображаться в браузере. Его функция заключается в увеличении читаемости (семантизации) таблицы, разрешении поисковых системам лучше понять содержимое таблицы, а также позволить читателям экрана лучше помочь специальным пользователям читать содержимое таблицы. */ E.caption Tag, добавьте заголовок и резюме в таблицу, заголовок используется для описания содержимого таблицы, расположение отображения заголовка: выше таблицы
<Таблица Border = cellPacing = cellPadding => <Tr> <th> Header </th> </tr> <tr> <td> data </td> </tr> </table>
<Таблица границы = сотока = cellpadding = summary => <caption> </caption> <tr> <hh> Сегодня пятница </td> </tr> </table>
Вернемся к теме, давайте вернемся к точке, где разница между сотовой панмировкой и сотовой связи - это сравнение между следующим набором табличных изображений и кодом сотовой связи:
<! Doctype html> <html> <head> <meta charset = utf-8> <Title> Различия в сотовой связи в таблице </title> <стиль тип = текст/CSS> Таблица {Margin-Bottom: 50px; } .ceshi {пограничный интервал: 20px; /*Указывает расстояние между границами смежных ячеек в таблице. */} </style> </head> <table width = 600 cellpacing = 0 bordercolor =#333 border = 1> <caption> Первая ячейка </caption> <tr> <td> тест 1 </td> <td> тест 2 </td> <td> test 3 </td> </tr> </table> <table width = 600 cellpacing = 20 -nector#3333 </td> </tr> </table> <table = 600 = 20 Brandor -Bordior = 20. <powtion> Вторая ячейка </caption> <tr> <td> test 1 </td> <td> тест 2 </td> <td> тест 3 </td> </tr> </table> <Таблица ширина = 600 Bordercolor =#333 Border = 1 Ceshi> <pation> the Cell </caption> <dr> <td> test 1 </td 1 </td test> test 1 </td> test> test> test> <dd> <dd> <td> тест 3 </td> </tr> </table> </html>Сравнивая код, две верхние таблицы имеют разные настройки, одна равен 0, а другая - 20. Отображаемый результат состоит в том, что расстояние между каждой ячейкой в первой таблице составляет 0, а расстояние между каждой ячейкой во второй таблице составляет 20. Расширенное: вторая таблица согласуется с третьей таблицей, но третья таблица не имеет межсферного интервала клеток. Мы обнаружили, что это расстояние на границу: 20px; это то же самое, что и результат между интервалом клеток = 20. Например, атрибут между клетками используется для указания зазора между ячейками таблицы. Значение параметра этого свойства составляет число, указывающее количество пиксельных точек, занятых разрывом ячейки.
<! Doctype html> <html> <head> <meta charset = utf-8> <Title> Различия в сотовой связи в таблицах </title> <стиль тип = текст/CSS> Таблица {Margin-Bottom: 50px; } </style> </head> <body> <table width = 600px border = 1 bordercolor =#ccc cellpadding = 0> <tr> <th> I - таблица счастливых клеток </th> <th> I - таблица счастливых клеток </th> <Th> I - таблица счастливых клеток </th> </tr> </table> <Таблица width = 600PX = 1 Border -Proder = 1 BorderPad =##20. <tr> <th> Я - счастливая форма ячейки </th> <Th> я счастливая форма ячейки </th> <Th> Я - форма счастливой ячейки </th> <Th> Я - форма счастливой ячейки </th> </tr> </table> </body> </html>Судя по приведенным выше коде, выполняющему результаты: две таблицы имеют разные значения кодов сотовой связи. В первой таблице слова «Я счастливая ячейка» - это 0 из ячейки, где она находится, то есть потому, что CellPadding = 0 установлена; Во второй таблице слова «Я счастливая ячейка», далеко от ячейки, где она находится, то есть расстояние между ячейкой, где я счастлив, составляет 20 пикселей. Проще говоря, сколько стоит ценность сотовой связи, равным, сколько пробелов осталось внутрь от границы ячеек в таблице, и элементы в ячейке никогда не войдут в эти пробелы. || Обратите внимание, что свойство сотового падения используется для указания размера пустого расстояния между содержанием ячейки и границей ячейки. Значение параметра этого свойства также составляет число, указывающее количество пикселей, занятых высотой пустого расстояния между содержанием ячейки и верхними и нижними границами, и количество пикселей, занятых шириной пустого расстояния между содержанием ячейки и левыми и правыми границами.
Например, резюме: клеточная передача представляет расстояние между ячейками, клеточная точка представляет расстояние между содержанием клеток и границей; Первый похож на край, последний похож на прокладку; гнездо (ячейка)-содержание таблицы; Начинка гнезда (заполнение таблицы) (CellPadding)-представляет расстояние за пределами гнезда, используемое для разделения гнезда и гнезда; Гнездо пространство (расстояние между таблицами)-представляет собой расстояние между столовой границей и наполнением гнезда, а также является расстоянием между наполнением гнезда
Расширение 1: Как слияние рядов и столбцов таблицы? Colspan Cross-Column Merge, Rowspan Cross-Row Merge
Дисплей кода:
<! Doctype html> <html> <head> <meta charset = UTF-8> <Title> Разница между ColSpan и RowsSpan </title> <стиль тип = текст/CSS> Таблица {маржа: 0 Auto; маржинальный бат: 50px; Текст-альбом: Центр; } </style> </head> <body> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =#ccc> <puttion> Нормальный дисплей: одна строка и три столбца </Подпись> <Tr> <td> Скажите что -то, не знаю </td> <td>, не знаю </td> <td>. ширина = 600 cellpadding = 10 сотока = 2 border = 1 bordercolor =#cc> <caption> Что мне делать сейчас, чтобы отобразить одну строку и два столбца? Colspan Cross-Cross Cross Merge </caption> <tr> <td> Скажи что-то, не знаю </td> <td colspan = 2> что-то скажи, не знаю </td> <!-<td> Скажи что-то, не знаю </td>-> </tr> </table> <! ========================================================================================= ========================================================================================= ========================================================================================= ========================================================================================== <Td> Скажи что -то, не знаю </td> </tr> <tr> <td> Скажи что -то, не знаю </td> <td> Скажи что -то, не знаю </td> <td> Скажи что -то, не знаю </td> </tr> </table> <Таблица. колонны? Rowsspan Cross-Row Merge </caption> <tr> <td rowspan = 2> скажи что-то, не знаю </td> <td> Скажи что-то, не знаю </td> </tr> <tr> <!-<td> что-то, не знаю </td>-> <td> что-то, не знайте </td> </tr> </table> </td> <td>.Расширение 2: Как слияние границ таблицы? пограничный коллапс: коллапс;
<!-Слияние таблицы ячейки-> <стиль типа = текст/css> Таблица {Border-Collapse: Collapsse; /* Пограничный коллапс: отдельный; * / /*Указывает, соединяются ли строки и ячейки таблицы на одной границе или отделены, как в стандартном HTML. */} </style> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =#ccc> <tbody> <tr> <td> cell 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> </tbody> </table>Наконец, в браузере Chrome в системе по умолчанию таблица граница границы серого, расстояние между границей 2 и т. Д.
/* stylesshipe stylesheep* / /* Таблица {Display: Table; пограничный коллапс: отдельный; Расхождение границы: 2PX; Пограничный цвет: серый; } * / / * border = 1 по умолчанию равен границе = 1px-граница с шириной: 1px; пограничной прямой шириной: 1px; пограничная ширина: 1px; Пограничная левая ширина: 1px; * / /* Bordercolor возвращает или устанавливает цвет границы объекта Bordercolor: W3C - String Указывает цвет границы элемента. Укажите либо имя цвета, либо цветовой код RGB. */Это статья о деталях разницы между CesllPacing и CellPadding в таблице. Для получения более связанного содержимого CESLLPANCE и CellPadding в таблицах, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!