Люди добрые помогите начинающему написать таблицу !!!

[Coder-vasya]

Добрые люди , помогите написать новичку таблицу. Мне дали задание, но я не могу разобраться, учусь на курсах , было всего 2 урока. Таблица на фото. В моем представлении сначала пишется таблица из 11 строк и 8 столбцов. Далее нужно объединить ячейки, затем убрать линии у закрашенных ячеек. Я не знаю как убрать линии у закрашенных ячеек. Далее я не знаю как выставить отступ от границы экрана в процентах , а также не знаю как выставить расстояние внизу между ячейками, как показано на рисунке. В идеале был бы очень признателен за полный код этой таблицы. Для меня проще 1 раз увидеть. Понимаю что для профессионала это 5ти минутное дело. Заранее благодарен откликнувшимся. Верхнюю строку я сделал 5% , чтобы в дальнейшем убрать границы ячеек и тем самым получить отступ от верхней границы экрана. Общая ширина таблицы 80% , далее расположив ее по центру получу по 10 % слева и справа. При удалении лишних ячеек , таблица не корректно отображается.  В общем любыми способами должна получиться таблица как на фото.

Edited June 7, 2017 by Coder-vasya

[Svetlana_P]

Больше шансов, что помогут, если выложите код, который у Вас уже получился. Например, тут https://codepen.io/pen/ Покажите людям ссылку. И спросите уже по конкретным моментам, что не получаются, показав, как пытались решить вопрос.

[Svetlana_P]

Уточните,

1. Вы CSS на курсе не проходили, и таблицу нужно сделать только на HTML?
2. Какие темы прошли на двух уроках?
3. И покажите задание, сформулированное на курсах в том виде, как Вы его получили.

[Schamil74]

5 часов назад, Coder-vasya сказал:

В идеале был бы очень признателен за полный код этой таблицы.

А как же вы планируете дальше создавать таблицы? Тяжело в учении, ..... ! Как говорится.

https://htmlacademy.ru/courses/39

 

[Coder-vasya]

Только что, Schamil74 сказал:

А как же вы планируете дальше создавать таблицы? Тяжело в учении, ..... ! Как говорится.

https://htmlacademy.ru/courses/39

 

Согласен!

[Coder-vasya]

3 часа назад, Svetlana_P сказал:

Уточните,

1. Вы CSS на курсе не проходили, и таблицу нужно сделать только на HTML?
2. Какие темы прошли на двух уроках?
3. И покажите задание, сформулированное на курсах в том виде, как Вы его получили.

CSS еще не проходили, таблицу нужно сделать только на HTML. Прошли основные теги и атрибуты к ним , скажем так. Создание простых таблиц и атрибуты к ним. Преподаватель решил дать мне домой таблицу по сложнее, так как на лекции я все довольно быстро сделал. Задание как на фото. Я не знаю лишь как убрать стороны ячейки и как сделать расстояние между нижней ячейкой и всей таблицей. Задание любым способом сделать таблицу как на рисунке. По ссылке я прикрепил свой набросок. Я не прошу сделать это за меня. Я просто хочу понять как это делается, увидеть своими глазами и это навсегда отпечатается у меня в голове. Не совсем понимаю как это написать. Там где закрашенные ячейки , можно конечно сделать границу того же цвета что и ячейка. Тогда она будет сливаться и условие будет выполнено. Либо каким то образом вообще убрать линии у закрашенных ячеек. Сам он сказал что думал неделю   Придумать то я придумал , а как написать , вот это проблема, заготовку сделал , путем тыка проверяю вот сижу  и очень сильно интересно , как сделать ощутимое расстояние между нижней ячейкой и всей таблицей. Жестких условий нет. Важен внеший вид таблицы. Сверху я сделал ячейки 5% от всей таблицы. Чтобы в последствии их обьеденить и как то сделать их невидимыми Так я достигну расстояния 5 % от верхнего края браузера до таблицы. Но как это написать ?

Edited June 7, 2017 by Coder-vasya

[Николя223]

эм тут в чем проблема то. 

не уверен что без css ты сделаешь таблицу высотой 90% от размера экрана.  

во первых сделай современный доктайп, скажи преподавателю что ты прошаренный) 

во вторых процентовку не даст сделать само тело документа так как по умолчанию оно равно высоте контента

мы решаем это примерно так https://codepen.io/anon/pen/MoayOr

 

далее есть два варианта - дальше на css проставить для таблицы margin (отступы) , собственно так и надо

либо можешь твою таблицу вставить в другую таблицу с одной ячейкой, у которой атрибут valign  поставь  middle. т.е. ты сделаешь примитивное центрирование по вертикали 

по горизонтали центрируй твою таблицу атрибутом align

 но в реальности так не делается, так как табличная верстка это начало 2000х 

и да в cellspacing  пропущено равно =)

[Svetlana_P]

Как сделать прямо, как Вы описали — не могу сказать. Возможно, потому что всё это описывают в CSS свойствах, и в таких изощрениях нет нужды. Через атрибуты тега стили, типа bgcolor, сейчас не задают. Но понимаю, что для практики хотите разобраться.

Поэтому предлагаю прошерстить свойства тегов table, tr, td, какие бывают. На htmlbook.ru, например, можно найти http://htmlbook.ru/samhtml/tablitsy и другие страницы.

Сразу узнаете, что поместить таблицу по центру можно свойством align="center". Убрать отступы между границами ячеек cellspacing="0". Повторите, как правильно объединять ячейки. Потому как я вижу, что у вас справа колбаса из лишних ячеек. Тут http://htmlbook.ru/samhtml/tablitsy/obedinenie-yacheek разбирается эта ошибка.

Если бы мне дали такое задание, я бы использовала вложенные таблицы. Потому что нельзя для строки или ячейки без помощи CSS задать свой вид границы. Только для всей таблицы сразу.

[Coder-vasya]

Спасибо большое , что не оставили без внимания попробую сейчас сделать как советует Светлана. Думаю что это самый лучший способ.