22.04.2020, 16:39
|
|
Аспирант
|
|
Регистрация: 06.07.2019
Сообщений: 36
|
|
|
Frame и колонки
Доброго времени суток! Задали на карантине сделать вот такое через Frame, но не пойму как сделать это все быстро... Как делаю я, то это выйдет на часов 10... Может подскажите как сделать это быстро и чтобы было удобно? Заранее спасибо, надеюсь ответ получу максимально быстро, т.к. работу нужно сдать сегодня
|
|
22.04.2020, 17:16
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
|
А что именно через iFrame?
Всю таблицу или каждую ячейку?
|
|
22.04.2020, 17:29
|
|
Аспирант
|
|
Регистрация: 06.07.2019
Сообщений: 36
|
|
|
Не понял сути вопроса, хм. Нужно такую таблицу сделать, через тег <frame>, каждую ячейку отдельно или все ячейки вместе (если возможно), но в итоге должно выглядеть так, как на прикрепленном фото
|
|
22.04.2020, 18:25
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Надо просто создать html файл, который содержит такую таблицу и выводить его через iframe (Зачем???)
Саму таблицу можно сделать через <table> указывая у td colspan и rowspan
Или используя grid c grid-template-areas:
Вот так начать можно
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.tab{
width: 800px;
border: 2px black solid;
padding: 3px;
grid-template-columns: repeat(10,1fr);
display: grid;
grid-template-areas:
'inf inf inf km3 km4 km5 km5 km5 km9 km9'
'km1 km2 km2 km3 km4 km6 km7 km8 km9 km9'
'km10 km10 km10 km11 km12 km13 km13 km13 . .';
}
.tab > div {
margin: 4px;
padding: 8px;
border: 1px black solid;
}
.inf {grid-area: inf;}
.km1 {grid-area: km1;}
.km2 {grid-area: km2;}
.km3 {grid-area: km3;}
.km4 {grid-area: km4;}
.km5 {grid-area: km5;}
.km6 {grid-area: km6;}
.km7 {grid-area: km7;}
.km8 {grid-area: km8;}
.km9 {grid-area: km9;}
.km10 {grid-area: km10;}
.km11 {grid-area: km11;}
.km12 {grid-area: km12;}
.km13 {grid-area: km13;}
.bgblue {
background-color:#00cccc;
}
</style>
</head>
<body>
<div class="tab">
<div class='inf bgblue'>Информатика 10А</div>
<div class='km1'> Комната 1 </div>
<div class='km2'> Комната 2 </div>
<div class='km3'> Комната 3 </div>
<div class='km4'> Комната 4 </div>
<div class='km5'> Комната 5 </div>
<div class='km6'> Комната 6 </div>
<div class='km7'> Комната 7 </div>
<div class='km8'> Комната 8 </div>
<div class='km9 bgblue'> Комната 9 </div>
<div class='km10'> Комната 10 </div>
<div class='km11'> Комната 11 </div>
<div class='km12'> Комната 12 </div>
<div class='km13'> Комната 13 </div>
</div>
</body>
</html>
Последний раз редактировалось voraa, 22.04.2020 в 18:37.
|
|
22.04.2020, 19:29
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,794
|
|
|
|
|
22.04.2020, 19:30
|
|
Аспирант
|
|
Регистрация: 06.07.2019
Сообщений: 36
|
|
Просто суть задания сделать через frame, но в любом случае, спасибо  |
|
22.04.2020, 22:07
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от voraa
|
|
Или используя grid c grid-template-areas:
|
Так не стоит делать, если это табличные данные, проверь вкладку Accessibility в консоли.
Jexly, атрибут frame указывал, какие части внешних границ таблицы должны быть видны. Однако такой атрибут у <table> больше не поддерживается в HTML5, хотя и работает в некоторых браузерах. Вместо этого используйте CSS.
Рекомендация: лучше НЕ указывать атрибут frame у таблицы, а вместо этого использовать CSS-свойство border для определения рамок у таблицы.
Пример — https://codepen.io/Malleys/pen/bGVgErV?editors=1100 |
|
22.04.2020, 22:54
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Сообщение от Malleys
|
Так не стоит делать, если это табличные данные, проверь вкладку Accessibility в консоли.
|
Это ваще ни разу не таблица.
И именно оформление этого, как таблицы будет сбивать с толку системы доступности и тех, кто ими пользуется.
|
Сообщение от Malleys
|
|
атрибут frame указывал, какие части внешних границ
|
Там выше автор писал про тег <frame>
Последний раз редактировалось voraa, 22.04.2020 в 22:57.
|
|
22.04.2020, 23:16
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от voraa
|
|
Там выше автор писал про тег <frame>
|
Ну это ты придумал, что нужно «именно через iFrame», а автор спрашивал про рамки и колонки таблицы.
Не нужно писать фреймы так, как будто это продукция Apple. Это на самом деле an inline frame, а не то, что ты подумал!
|
Сообщение от voraa
|
Это ваще ни разу не таблица.
И именно оформление этого, как таблицы будет сбивать с толку системы доступности и тех, кто ими пользуется.
|
Так и написано, что «если это табличные данные»! |
|
|
|
