Консультация онлайн # 202699

Раздел: HTML / DHTML / XML / CSS
Автор вопроса: svrvsvrv (Посетитель)
Дата: 01.05.2022, 21:43 Консультация неактивна
Поступило ответов: 1
Здравствуйте, уважаемые эксперты! Прошу вас ответить на следующий вопрос:
Задача в прикреплённом файле.

-----
Прикрепленные файлы:

Ответ # 1, solowey (Советник)

Добрый день.
Пример решения.
index.html
Код [HTML]
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Консультация онлайн # 202699</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <table>
            <tr class="first">
                <td>слово</td>
                <td>слово</td>
            </tr>
            <tr>
                <td>слово</td>
                <td>слово</td>
            </tr>
            <tr>
                <td>слово</td>
                <td>слово</td>
            </tr>
            <tr class="first">
                <td>слово</td>
                <td>слово</td>
            </tr>
            <tr class="five">
                <td>слово</td>
                <td>слово</td>
            </tr>
        </table>
    </body>
</html>

main.css
Код [CSS]
table {
    border: 1px solid black;
}

td {
    border: 1px solid black;
}

.first {
    font-size: 18px;
}

.five {
    font-style: italic;
}

solowey

Советник
02.05.2022, 21:02
5
Благодарю!

Мини-форум консультации # 202699

Алексеев Владимир Николаевич

Мастер-Эксперт

ID: 259041

325814

= общий =    02.05.2022, 01:25
svrvsvrv

Посетитель

ID: 399424

325838

= общий =    03.05.2022, 17:31
Большое спасибо за Ваш ответ. Что Вы думаете о моём варианте кодов?

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!=HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<table border="1" class="table1">
<tbody>
<tr>
<td class="line1">он</td>
<td class="line2">она</td>
</tr>
<tr>
<td class="line3">ты</td>
<td class="line4">вы</td>
</tr>
<tr>
<td class="line5">утро</td>
<td class="line6">вечер</td>
</tr>
<tr>
<td class="line7">чёрный</td>
<td class="line8">белый</td>
</tr>
<tr>
<td class="line9">добро</td>
<td class="line10">зло</td>
</tr>
</tbody>
</table>
</body>
</html>

<style>
.table1 {
border-collapse: collapse;
width: 50%;
height: 100px;
}
.line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8, .line9, .line10
{
font-family: "Times New Roman", Times, serif;
}
.line9, .line10
{
font-style: italic;
}
.line1, .line2, .line7, .line8
{
font-size: 18px;
}
</style>
solowey

Советник

ID: 400484

325864

= общий =    05.05.2022, 07:59

Что Вы думаете о моём варианте кодов?


Мы предлагаем один из вариантов решения. Ваш вариант имеет место на жизнь. Можно было сделать и другими способами. Выбор за вами.
svrvsvrv

Посетитель

ID: 399424

325889

= общий =    05.05.2022, 20:33
Понял, спасибо.
Алексеев Владимир Николаевич

Мастер-Эксперт

ID: 259041

325891

= общий =    06.05.2022, 02:52
Вы в своём Ответе написали коды для 2х файлов index.html , main.css , но НЕ приложили эти файлы, и НЕ написали, Как воспользоваться этими кодами, чтобы читатели могли создать упомянутые файлы и убедиться в их правильной работо-способности? Я, конечно, догадываюсь (и некоторые читатели Ваших Ответов тоже вероятно смогут догадаться), что надо создать Текстовые документы и вставить в них Ваши коды. Я создал 2 файла 202699-Htm.htm + main.css , но мои браузеры отображают Ваш контент НЕправильно: Mozilla Firefox выводит на экран ромбики вместо букв (скриншот прилагаю), а Internet Explorer - квадратики.
В Ваших Ответах в соседних консультациях rfpro.ru/question/202690 и rfpro.ru/question/202693 автор Вопроса тоже отметил проблемы, на которые Вы посоветовали ему "Возможно, ваш браузер не поддерживает данный код. Вы можете почитать об этом в сети Интернет… Я использовал для проверки последнюю версию браузера Chrome".

Можно ли сделать так, чтобы Ваши профессионально-написанные коды работали во многих популярных браузерах, а не только в тяжёлом Chrome ? Я стал искать причину проблемы и обнаружил, что при создании Текстового документа ОС Windows сохраняет файл в кодировке по-умолчанию windows-1251 (корпорация Microsoft называет национальные однобитные кодировки обобщённым термином ANSI). А в Ваших кодах Вы прописали тэг
<meta charset=utf-8> . Исправить глюк несоответствия мне удалось 2мя способами:
1)Перекодировать файл index.html в кодировку utf-8 согласно Вашему charset-значению , либо
2)Заменить Ваше charset=utf-8 на charset=windows-1251 .

Ваш новейший браузер Chrome обладает инструментом интеллектуальной правки ошибки несоответствия кодировки (похоже, он делает какой-то лингвистический анализ кодов букв национального алфавита, обнаруженных им в контенте html-файла, я ранее замечал подобное поведение новых браузеров).
Чтобы Ваши Ответы работали у большинства читателей, я предлагаю Вам исправить charset-значение на windows-1251 ,
либо добавить указание о том, что index.html надо сохранять в кодировке utf-8 ,
либо заменить публикацию Ваших кодов готовыми файлами.
С уважение, В.Алексеев.
Возможность оставлять сообщения в мини-форумах консультаций доступна только после входа в систему.
Воспользуйтесь кнопкой входа вверху страницы, если Вы зарегистрированы или пройдите простую процедуру регистрации на Портале.