#html #css
Вопрос:
У меня есть следующий css-бит
table { border-collapse: collapse; } td { border: 1px solid black; text-align: center; width: 25px; } и мне нужно создать следующую страницу стиля с помощью html:
как я могу этого достичь?
вот моя попытка:
lt;tablegt; lt;tdgt;1lt;/tdgt; lt;tdgt;2lt;/tdgt; lt;tdgt;4lt;/tdgt; lt;trgt; lt;tdgt;2lt;/tdgt; lt;tdgt;4lt;/tdgt; lt;tdgt;6lt;/tdgt; lt;tdgt;8lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;6lt;/tdgt; lt;tdgt;8lt;/tdgt; lt;tdgt;9lt;/tdgt; lt;/trgt; lt;/tablegt; Комментарии:
1. Вы можете изучить атрибуты
rowspanи.colspan2. посмотрите на сетку-шаблон
Ответ №1:
td { border: 1px solid black; padding: 10px; text-align: center; } lt;tablegt; lt;trgt; lt;tdgt;1lt;/tdgt; lt;td colspan="2"gt;2lt;/tdgt; lt;tdgt;4lt;/tdgt; lt;/trgt; lt;trgt; lt;td rowspan="3"gt;2lt;/tdgt; lt;tdgt;4lt;/tdgt; lt;tdgt;6lt;/tdgt; lt;tdgt;8lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;6lt;/tdgt; lt;td rowspan="2" colspan="2"gt;9lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;8lt;/tdgt; lt;/trgt; lt;/tablegt; Я думаю, что структура немного неправильная, а также вы должны использовать colspan и rowspan для TDs. Я тоже добавил немного css.
Комментарии:
1. ваш столик пропустил первый tr-тег 😉
Ответ №2:
Немного поздно. И @NicolaeMaties уже правильно ответил. Путь лежит просто через col и rowspan. нумерация помогает вам лучше понять это. Тогда принцип также легко понять: colspan="howManyColsMerged" и rowlspan="howManyRowsMerged" .
td { padding: 20px; text-align: center; } lt;table border="1px"gt; lt;trgt; lt;tdgt;1lt;/tdgt; lt;td colspan="2"gt;2lt;/tdgt; lt;tdgt;3lt;/tdgt; lt;trgt; lt;td rowspan="3"gt;4lt;/tdgt; lt;tdgt;5lt;/tdgt; lt;tdgt;6lt;/tdgt; lt;tdgt;7lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;8lt;/tdgt; lt;td rowspan="2" colspan="2"gt;9lt;/tdgt; lt;/trgt; lt;trgt; lt;tdgt;10lt;/tdgt; lt;/trgt; lt;/tablegt;