Как переделать часть блочного кода на табличный?

Question

Екатерина Красилова @Izzy19_06

студентка

HTML
CSS

Как переделать часть блочного кода на табличный?

Здравствуйте, я новичок в создании сайтов, нужно было сделать полностью табличную страничку, но подвал у меня был сделан с помощью блоков. При попытки переделать, всё слетало, подскажите пожалуйста как корректно переделать.

Вопрос задан более трёх лет назад
72 просмотра

14 комментариев

Подписаться 1 Простой 14 комментариев

Rustam Bainazarov @SmthTo Куратор тега CSS

Что слетает, что переделать?

Зачем таблицы? Если для табличных данных, то вопроса нет, если для разметки — переделывайте.

Написано более трёх лет назад
Екатерина Красилова @Izzy19_06 Автор вопроса

Нужно div заменить правильно на таблицу, но при попытке замены всё оформление портится. css был общим для всего подвала, но прописан для div. Нужно поменять и сss как я понимаю, но для этого сначала переделать код, надеюсь правильно объяснила

Написано более трёх лет назад
archelon @archelon

Екатерина Красилова, а как именно вы меняете? автозаменой div на td или как?
(оставим за скобками вопрос о целесообразности)

Написано более трёх лет назад
RAX7 @RAX7

залей код со своей попыткой в песочницу jsfiddle.net

Написано более трёх лет назад
archelon @archelon

Рустам Байназаров, учебное задание, наверное.
бородатые иркутские профессора учат, как привыкли.
мой прадед верстал таблицами, мой дед верстал таблицами...

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Прошу прощения, что не в тему, ну просто очень любопытно — откуда такая задача?

Написано более трёх лет назад
Екатерина Красилова @Izzy19_06 Автор вопроса

Сергей delphinpro, часть требования к курсовой

Написано более трёх лет назад
Екатерина Красилова @Izzy19_06 Автор вопроса

archelon, примерно по такому принципу делала

Написано более трёх лет назад
archelon @archelon

Екатерина Красилова, покажите, что у вас получилось (опубликуйте фрагмент кода), тогда вам подскажут, что не так.
а лучше попробуйте самостоятельно разобраться с версткой таблиц.
в этом нет ничего сложного.

Написано более трёх лет назад
Екатерина Красилова @Izzy19_06 Автор вопроса

archelon, со всем более менее разобралась, спасибо, не могу только высоту изменить, нет никакой реакции на height
@archelon,

Написано более трёх лет назад
archelon @archelon

Екатерина Красилова, покажите html и css через https://jsfiddle.net
или здесь сам код (не скриншоты).
тут есть специальная кнопка для этого </>

Написано более трёх лет назад

Екатерина Красилова @Izzy19_06 Автор вопроса

archelon,

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Об авторе</title>
	<link rel="stylesheet" href="css/style-index.css" type="text/css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<style type="text/css">
		#maket {
    		width: 75%; /* Ширина всей таблицы */
    		padding: 10px; /* Поля вокруг ячеек */

   		}
   		TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */

   }
   
   </style>
	</head>
<body>
	<table>
			<tr>
				<td id="aa"><p>Наши Контакты:</p></td>
				<td id="ab"><p>Основная информация</p></td>
				<td rowspan="3"><img src="images/author.img" alt="Автор" id="image" width="180px"></td>
			</tr>
			<tr>
				<td class="gen"><ul id="aut">
					<li><a href="mailto:zradiana@mail.ru">zradiana@mail.ru</a></li>
					<li>89246327295</li>
					<li><a href="https://vk.com/id95713420" target="_blank" class="fa fa-vk"> Мы в ВК </a></li>
					<li><a href="https://www.instagram.com/rd_/" target="_blank" class="fa fa-instagram"> Мы в Инcтаграме </a></li>
				</ul></td>
					<td id="info"> 
					<p>Автор сайта</p>
					<p>Студент группы ИСТб-18-1</p>
					<p>Красилова Екатерина Андреевна</p>
					<p>Дата рождения: 19.06.2000</p>
					<p>Адрес: г.Иркутск, мкр.Первомайский, д.69, кв.19</p>
				</td>		
			</tr>
			<tr>
				<td></td>
				<td id="da"> о себе</td>
			</tr>
			<tr>
				<td class="dop"><p>Образование</p></td>
				<td class="dop_a">
					<p>2007-2018, МБОУ СОШ №35</p>
					<p>2018-н.в., ИРНИТУ</p>
				</td>
			</tr>
			<tr>
				<td class="dop"><p>Личные качества</p></td>
				<td class="dop_a"><p>Без вредных привычек, отзывчивая, отвественная, добрая </p></td>
			</tr>
			<tr>
				<td class="dop"><p>Хобби</p></td>
				<td class="dop_a"><p>Катание на велосипеде, рисование, просмотр сериалов</p></td>
			</tr>

			<td class="dop"><p>Навыки</p></td>
			<td class="dop_a"><p>Средний уровень английского </p></td>
		</tr>
	</table>
	<table cellspacing="0" id="maket" height="500";>
		
		<tr class="footer">
			<td class="inner-footer" ><a href="http://www.istu.edu/" target="_blank">
				<img src="images/logo.png" alt=""></a>
			  <p class="fa fa-copyright">Красилова Екатерина, 2019, <a href="mailto:zradiana@mail.ru">zradiana@mail.ru</a></p>
			</td>
		</tr>
	</table>
	</body>
</html>

И css

table{
	margin: 25px 10% 10vh 10%;
	width: 80%;
	min-height: 80vh;
	background-color: #EDDFA3;
} 
td{
 	width: 100px;
 	empty-cells: show;
 	background-color: #EDDFA3; 
 	color: #622624;
}
td li{
	height: 25px;
 	width: 160px;
 	list-style: none;
 	border-bottom: 2px solid #BE9B9B;
}
#aut a{
 	text-decoration: none;
 	color: #622624;
 	font-size:15px;
 	transition: font-size 0.6s 0.1s linear;
}
#aut a:hover{
 	font-size:18px;
}
.dop{
 	height: 20px;
 	padding-left: 30px;
 	font-family: 'Times, Times New Roman', serif;
 	font-weight: bold;
 	font-size: 20px;
}
.dop>p{
	display: block;
	width: 200px;
}
.dop_a{
	text-align: center;
}
.gen{
	width: 150px;
	vertical-align: top;
}
#aa{
	width: 170px;	
	vertical-align: bottom;	
	padding-left: 0;
	text-transform: uppercase;
	font-family: 'Times, Times New Roman', serif;
	font-size: 18px;
	font-weight: bold;
}
#aa p{
	width: 145px;
	border-bottom: 2px solid #BE9B9B;	
}
#ab{
	vertical-align: bottom;	
	text-align: center;
	padding-bottom: 20px;
	text-transform: uppercase;
	font-family: 'Rubik Mono One', sans-serif;
	font-size: 30px;
	font-weight: bold;
}
#info{
	text-align: center;
	vertical-align: top;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
}
#image{
	padding-left: 85px;
	height: 250px;
	width: auto;
	border-radius: 20px;
}
.fa{
	font-size: 18px;
	align-items: center;
}
#da{
	text-align: center;
	height: 10vh;
	vertical-align: bottom;
	text-transform:uppercase;
	font-family: 'Rubik Mono One', sans-serif;
	font-size: 30px;
	padding-bottom: 8px;
}

Написано более трёх лет назад

archelon @archelon
https://jsfiddle.net/9hbemc0j/2/
В одном месте есть закрывающий тег </tr> без открывающего. поправьте.
вот эта строчка с ошибкой: <table cellspacing="0" id="maket" height="500";>
Уберите точку с запятой <table cellspacing="0" id="maket" height="500">
А лучше вообще не используйте атрибут height — он давно устарел, определяйте оформление через css.
#maket { height: 500 px; }
Написано более трёх лет назад
Екатерина Красилова @Izzy19_06 Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 4 часа назад
- 39 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 4 часа назад
- 51 просмотр
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 11 часов назад
- 84 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 31 просмотр
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 99 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 72 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сделать несколько гиф анимаций

22 нояб. 2024, в 21:47

3000 руб./за проект

Доделать сайт на Revolution 3

22 нояб. 2024, в 21:44

50000 руб./за проект

Анализ и оценка проектов, с последующим запуском

22 нояб. 2024, в 20:20

1000 руб./в час

Что слетает, что переделать?

Зачем таблицы? Если для табличных данных, то вопроса нет, если для разметки — переделывайте.
Нужно div заменить правильно на таблицу, но при попытке замены всё оформление портится. css был общим для всего подвала, но прописан для div. Нужно поменять и сss как я понимаю, но для этого сначала переделать код, надеюсь правильно объяснила
Екатерина Красилова, а как именно вы меняете? автозаменой div на td или как?
(оставим за скобками вопрос о целесообразности)
залей код со своей попыткой в песочницу jsfiddle.net
Рустам Байназаров, учебное задание, наверное.
бородатые иркутские профессора учат, как привыкли.
мой прадед верстал таблицами, мой дед верстал таблицами...
Прошу прощения, что не в тему, ну просто очень любопытно — откуда такая задача?
Сергей delphinpro, часть требования к курсовой
archelon, примерно по такому принципу делала
Екатерина Красилова, покажите, что у вас получилось (опубликуйте фрагмент кода), тогда вам подскажут, что не так.
а лучше попробуйте самостоятельно разобраться с версткой таблиц.
в этом нет ничего сложного.
archelon, со всем более менее разобралась, спасибо, не могу только высоту изменить, нет никакой реакции на height
@archelon,
Екатерина Красилова, покажите html и css через https://jsfiddle.net
или здесь сам код (не скриншоты).
тут есть специальная кнопка для этого </>
https://jsfiddle.net/9hbemc0j/2/
В одном месте есть закрывающий тег </tr> без открывающего. поправьте.
вот эта строчка с ошибкой: <table cellspacing="0" id="maket" height="500";>
Уберите точку с запятой <table cellspacing="0" id="maket" height="500">
А лучше вообще не используйте атрибут height — он давно устарел, определяйте оформление через css.
#maket { height: 500 px; }
archelon, спасибо большое, исправила, но я нашла, что там одна таблица накладывалась на другую по свойствам

Как переделать часть блочного кода на табличный?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт