Таблица на HTML и CSS

{"draftJsState":{"blocks":[{"data":{"image":{"id":"6792144e7562986d99b4c2d5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с таблицами в HTML и CSS ","type":"atomic:image","key":"c0434"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с таблицами в HTML и CSS позволяет вам структурировать данные и представлять их в удобочитаемом формате. Вот пример, который демонстрирует, как создать таблицу с использованием HTML и стилизовать её с помощью CSS.","type":"unstyled","key":"8jfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML","type":"header-three","key":"6qr7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n \n Таблица на HTML и CSS\n\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Имя	Возраст	Город
Иван	25	Москва
Анна	30	Санкт-Петербург
Петр	22	Екатеринбург

\n\n","type":"unstyled","key":"109hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS (styles.css)","type":"header-three","key":"3jj96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\n.table-container {\n width: 80%;\n overflow-x: auto; /* Позволяет прокручивать таблицу на маленьких экранах */\n}\n\ntable {\n width: 100%;\n border-collapse: collapse; /* Убирает двойные границы между ячейками */\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nth, td {\n padding: 12px;\n text-align: left;\n border: 1px solid #ddd; /* Граница ячеек */\n}\n\nth {\n background-color: #4CAF50; /* Цвет фона заголовков */\n color: white; /* Цвет текста заголовков */\n}\n\ntr:nth-child(even) {\n background-color: #f2f2f2; /* Цвет фона четных строк */\n}\n\ntr:hover {\n background-color: #ddd; /* Цвет фона строки при наведении */\n}","type":"unstyled","key":"epnu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объяснение кода:","type":"header-three","key":"1tmsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML: Создаем таблицу с заголовками () и данными ().\nИспользуем для заголовков и для содержимого таблицы.\n","type":"ordered-list-item","key":"2rbm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS: Устанавливаем шрифт и фон для страницы.\nСтили для контейнера таблицы, чтобы она занимала 80% ширины и могла прокручиваться на маленьких экранах.\nУстанавливаем стили для таблицы, включая ширину, границы и тени.\nЗадаем отступы и выравнивание для ячеек.\nЗадаем цвет фона для заголовков и четных строк, а также эффект при наведении на строки.\n","type":"ordered-list-item","key":"a8kip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код создает простую, но стильную таблицу, которую можно использовать для отображения данных. Вы можете изменять стили и содержимое по своему усмотрению.","type":"unstyled","key":"fo1bo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"LkiS8IJqHZ9h9VLUauyW"}],"entityMap":{}},"mentions":[]}