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

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, спасибо большое, исправила, но я нашла, что там одна таблица накладывалась на другую по свойствам

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

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

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

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

Войти через центр авторизации

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

JavaScript

+2 ещё

Средний
На сайте наблюдаются лаги в в мобильной версии сайта, в чём проблема?
- 1 подписчик
- 10 часов назад
- 51 просмотр
1

ответ
HTML

+2 ещё

Простой
Как верстать такой блок на flexbox?
- 1 подписчик
- 11 часов назад
- 50 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Вопросик в синем прямоугольнике на мобилках за что отвечает?
- 1 подписчик
- 11 часов назад
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как повторить этот эффект авторов?
- 3 подписчика
- 15 часов назад
- 166 просмотров
0

ответов
HTML

+2 ещё

Простой
Кривое отображение текста HTML, CSS, как исправить?
- 1 подписчик
- 19 часов назад
- 71 просмотр
0

ответов
CSS

Простой
Есть ли какие то нюансы использования в css перенос текста, если не умещается в блок,?
- 2 подписчика
- вчера
- 82 просмотра
2

ответа
CSS

Простой
CSS градиент анимация, убрать жесткие границы?
- 2 подписчика
- вчера
- 128 просмотров
1

ответ
HTML

+2 ещё

Простой
При заполнении пространства строками текста div блока по высоте как переносить текст вторым столбцом?
- 1 подписчик
- вчера
- 44 просмотра
1

ответ
CSS

+1 ещё

Простой
Как задать высоту строк в CSS Grid Layout в зависимости от наличия контента?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
CSS

Простой
Как добавить индивидуальный фон для каждого изображения?
- 1 подписчик
- вчера
- 79 просмотров
1

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

Верстальщик HTML

MST

от 500 $

Frontend developer / HTML-верстальщик (part-time)

HRScan

от 800 до 1 000 €

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Создать логотип

29 июн. 2024, в 07:14

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

Разработка приложения на Flutter

15 июн. 2024, в 13:31

1400 руб./в час

Написать JavaScript в программе android-studio-windows

29 июн. 2024, в 00:07

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

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

Зачем таблицы? Если для табличных данных, то вопроса нет, если для разметки — переделывайте.
Нужно 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, спасибо большое, исправила, но я нашла, что там одна таблица накладывалась на другую по свойствам

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

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

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

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