Оформление таблицы HTML5 без доступа к файлу CSS

ProgramBox

Оформление таблицы HTML5 без доступа к файлу CSS

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#html

#HTML

Вопрос:

Я пытаюсь воссоздать эту таблицу в HTML5. Это не обязательно должно выглядеть идеально, просто достаточно близко. У меня нет доступа к файлу CSS. Благодарен за любой совет по наилучшей практике.

Спасибо.

1. Можете ли вы использовать встроенный CSS?

2. возможно, вы имеете в виду: у вас нет доступа к внешнему файлу css… но вы можете сделать это с помощью встроенного стиля?

3. Да, извините, я имел в виду, что у меня нет доступа к файлу CSS — я могу использовать встроенный стиль.

4. У меня нет доступа к заголовку страницы. Итак, в основном я редактирую HTML из расширенного текстового поля, которое является частью CMS. (Я должен был упомянуть об этом) Что бы я ни делал, кажется, что CSS переопределяет встроенные стили. Однако, помимо этого, я не думал, что атрибут border поддерживается в HTML5. Смотрите это в школах W3: w3schools.com/tags/tryit.asp?filename=tryhtml_table_border

5. CSS-граница поддерживается полностью, HTML-граница таблицы — нет.

Ответ №1:

Варианты, которые у вас есть:

Три варианта, от худшего к лучшему:

Оформите все элементы HTML <table> вручную, используя встроенные стили, такие как
```
  <table style='width:80%;margin:auto;'> 
  
```
Это совсем не рекомендуется, но это перезапишет почти все стили, определенные CSS.
Используйте <style> тег для установки стилей в заголовке вашего HTML-файла, который фактически содержит встроенную таблицу стилей CSS в вашем HTML-документе.
```
 <link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
table tr th {
    color: orange;
    font-weight: bold;
}
</style>
  
```
Следует отметить, что <style> разметка должна вводиться после определения таблиц стилей (см. Пример выше), в противном случае внешние таблицы стилей перезапишут ваши <style> элементы (поскольку они загружаются после нее).
Используйте другую таблицу стилей для этого конкретного элемента таблицы. Чтобы минимизировать перезапись и максимально сфокусироваться, вы можете определить таблицу с помощью id , и ваша таблица стилей будет просто использовать эту ссылку на идентификатор.

Текст HTML:
```
     <table id='mytable'>....</table>
  
```
Файл таблицы стилей CSS:
```
 #mytable tr td{
   background-color:#ccc;
   }
etc. etc.
  
```
HTML Head:
```
 <link rel="stylesheet" type="text/css" href="existingStyleSheet.css">
<link rel="stylesheet" type="text/css" href="myTableStyle.css">
  
```
Пока ваша собственная таблица стилей применяется последней (как показано в примере) после текущих таблиц стилей, ее правила обычно перезаписывают уже установленные унаследованные правила. Тем более, если стили применяются через id ссылку (а не класс).

Рекомендуется: Создайте новую таблицу стилей и прикрепите ее в последнюю очередь к вашему HTML-документу.

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

Ответ на комментарии к вопросу:

Если вы не можете получить доступ к <head> HTML-документу, тогда вам придется использовать style встроенные теги. Если эти эффекты тегов перезаписываются, вам следует проверить точные правила, которые применяются при их написании, проверить наличие !important маркера и применить этот же маркер к вашим собственным встроенным стилям CSS:

 <table style='border: 1px solid #000 !important;'></table>

Приведенное выше не должно быть в состоянии быть перезаписано чем-либо, но другие правила CSS могут вмешиваться, такие как объявления !important границ для элементов <tr> or <td> , которые могут выглядеть так, как будто они искажают границу таблицы и т.д.

Это также может быть очень полезным чтением для вас

Ответ №2:

Используйте <style> тег для записи CSS внутри вашего HTML или используйте встроенный CSS (пункт «Встроенные стили»)