Frame и колонки
Вложений: 1
Доброго времени суток! Задали на карантине сделать вот такое через Frame, но не пойму как сделать это все быстро... Как делаю я, то это выйдет на часов 10... Может подскажите как сделать это быстро и чтобы было удобно? Заранее спасибо, надеюсь ответ получу максимально быстро, т.к. работу нужно сдать сегодня
|
А что именно через iFrame?
Всю таблицу или каждую ячейку? |
Не понял сути вопроса, хм. Нужно такую таблицу сделать, через тег <frame>, каждую ячейку отдельно или все ячейки вместе (если возможно), но в итоге должно выглядеть так, как на прикрепленном фото
|
Надо просто создать 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>
|
|
Просто суть задания сделать через frame, но в любом случае, спасибо :)
|
Цитата:
Jexly, атрибут frame указывал, какие части внешних границ таблицы должны быть видны. Однако такой атрибут у <table> больше не поддерживается в HTML5, хотя и работает в некоторых браузерах. Вместо этого используйте CSS. Рекомендация: лучше НЕ указывать атрибут frame у таблицы, а вместо этого использовать CSS-свойство border для определения рамок у таблицы. Пример — https://codepen.io/Malleys/pen/bGVgErV?editors=1100 |
Цитата:
И именно оформление этого, как таблицы будет сбивать с толку системы доступности и тех, кто ими пользуется. Цитата:
|
Цитата:
Не нужно писать фреймы так, как будто это продукция Apple. Это на самом деле an inline frame, а не то, что ты подумал! Цитата:
|
| Часовой пояс GMT +3, время: 13:40. |