Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2020, 16:39
Аспирант
Отправить личное сообщение для Jexly Посмотреть профиль Найти все сообщения от Jexly
 
Регистрация: 06.07.2019
Сообщений: 36

Frame и колонки
Доброго времени суток! Задали на карантине сделать вот такое через Frame, но не пойму как сделать это все быстро... Как делаю я, то это выйдет на часов 10... Может подскажите как сделать это быстро и чтобы было удобно? Заранее спасибо, надеюсь ответ получу максимально быстро, т.к. работу нужно сдать сегодня
Изображения:
Тип файла: jpg frame.jpg (103.8 Кб, 11 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2020, 17:16
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

А что именно через iFrame?
Всю таблицу или каждую ячейку?
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2020, 17:29
Аспирант
Отправить личное сообщение для Jexly Посмотреть профиль Найти все сообщения от Jexly
 
Регистрация: 06.07.2019
Сообщений: 36

Не понял сути вопроса, хм. Нужно такую таблицу сделать, через тег <frame>, каждую ячейку отдельно или все ячейки вместе (если возможно), но в итоге должно выглядеть так, как на прикрепленном фото
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2020, 18:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Надо просто создать 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.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2020, 19:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Генераторы HTML таблиц на любой вкус.
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2020, 19:30
Аспирант
Отправить личное сообщение для Jexly Посмотреть профиль Найти все сообщения от Jexly
 
Регистрация: 06.07.2019
Сообщений: 36

Просто суть задания сделать через frame, но в любом случае, спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2020, 22:07
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2020, 22:54
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Malleys Посмотреть сообщение
Так не стоит делать, если это табличные данные, проверь вкладку Accessibility в консоли.
Это ваще ни разу не таблица.
И именно оформление этого, как таблицы будет сбивать с толку системы доступности и тех, кто ими пользуется.

Сообщение от Malleys Посмотреть сообщение
атрибут frame указывал, какие части внешних границ
Там выше автор писал про тег <frame>

Последний раз редактировалось voraa, 22.04.2020 в 22:57.
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2020, 23:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от voraa
Там выше автор писал про тег <frame>
Ну это ты придумал, что нужно «именно через iFrame», а автор спрашивал про рамки и колонки таблицы.

Не нужно писать фреймы так, как будто это продукция Apple. Это на самом деле an inline frame, а не то, что ты подумал!

Сообщение от voraa
Это ваще ни разу не таблица.
И именно оформление этого, как таблицы будет сбивать с толку системы доступности и тех, кто ими пользуется.
Так и написано, что «если это табличные данные»!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить заголовок колонки sferg Общие вопросы Javascript 2 28.06.2017 11:13
JqGrid - скрыть показать колонки kot_k_k jQuery 1 17.02.2016 11:56
Свойство column-width, как обратиться к контенту колонки? pro100set Общие вопросы Javascript 8 12.02.2013 20:48
как получить загружений урл iframe или frame NOCaut Events/DOM/Window 0 15.11.2011 14:51
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29