На веб-страницах мы обычно используем таблицы для отображения некоторых данных, например таблиц производительности, финансовых отчетов и т. д. Однако по умолчанию стиль таблиц некрасивый и даже не соответствует стилю страницы. CSS предоставляет свойства, которые позволяют изменять стиль таблицы и значительно улучшать ее внешний вид.
1. Граница таблицы HTML
В учебной части HTML мы использовали атрибут border для установки таблицы. Код выглядит следующим образом:
<tableborder=1><thead><th>Имя</th><th>Пол</th></thead><tbody><tr><td>Чжан Сан</td><td>Мужчина</td ></tr><tr><td>李思</td><td>Женский</td></tr></tbody></table>
Результаты запуска:
На самом деле этот метод не рекомендуется. Потому что веб-дизайн следует принципу, согласно которому HTML представляет контент, а CSS описывает стиль.
Для таблиц содержимым таблицы является текст в строках и столбцах, а граница — это украшение внешнего вида таблицы и принадлежит к части стиля, поэтому ее лучше описывать с помощью CSS.
2. Граница таблицы настроек CSS
Вы можете использовать границу CSS, чтобы установить границу таблицы. Код выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-collapse:collapse;</style> </head><body><tableclass=table_oneborder=1><tr><th>Число</th><th>Имя</th><th>Возраст</th></tr><tr><td >1</td><td>Чжан Сан</td><td>15</td></tr><tr><td>2</td><td>李思</td><td> 11</td></tr></table><tableclass=table_twoborder=1px><tr><th>Число</th><th>Имя</th><th>Возраст</th></tr ><tr><td>1</td><td>Чжан Сан</td><td>15</td></tr><tr><td>2</td><td>李思< /td><td>11</td></tr></table></body></html>Результаты бега следующие:
(1) макет таблицы: установите алгоритм макета таблицы. Существует два алгоритма макета: алгоритм фиксированного макета таблицы и алгоритм автоматического макета таблицы;
(2) border-collapse: укажите, будут ли границы ячеек таблицы объединяться или разделяться в соответствии со стандартными стилями HTML;
(3) border-spacing: установите горизонтальное и вертикальное расстояние между двумя соседними границами, когда границы таблицы разделены;
(4) сторона заголовка: установите положение заголовка таблицы относительно таблицы;
(5) Пустые ячейки: укажите, следует ли отображать границу ячейки, когда в ячейке таблицы нет содержимого.