X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Составить красивую html таблицу, html таблица
stixia007
stixia007
Topic Starter сообщение 7.8.2014, 12:18; Ответить: stixia007
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Ещё раз здрасте. В общем дело пустяковое, всё с мог осилить вот:

Код
<table border="1" height="100" width="500">
<tr>
<td>[img]http://warick.ru/uploads/posts/2014-08/1407397763_character.gif[/img]</td>
<td>Урон: 47 - 57
Дальность атаки: 128
Броня: 2.6
Обзор: 1800 / 800</td>
<td>Сторона: Sentinel
Скорость атаки: 1.7
Тип атаки: ближний
Скорость: 300</td>
<td>Сила - 21+2,7
Ловкость - 14+1,3
Разум - 16+1,5</td>
</tr></table>


Выглядит так:



А хотелось бы вот так:



Я не знаю как сделать чтоб картинка была на все строчки. И возможно вы подскажете, как улучшить вариант такой про таблице :)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 7.8.2014, 12:27; Ответить: x64
Сообщение #2


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3427
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2749 раз
Репутация:   289  


как вариант:
<tr> заменить на <tr valign="middle">
об атрибуте valign

хотел предложить css, но у вас и так уже <table border="1" height="100" width="500">
одним большем, одним меньше, не принципиально


Цитата(stixia007 @ 7.8.2014, 12:18) *
Я не знаю как сделать чтоб картинка была на все строчки

в смысле, по горизонтали? смотрите атрибут colspan
если по вертикали, то rowspan
про сам td

Сообщение отредактировал x64 - 7.8.2014, 12:29


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 7.8.2014, 12:28; Ответить: mmkulikov
Сообщение #3


Старожил
******

Группа: Active User
Сообщений: 2030
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


stixia007, http://htmlbook.ru/html/table/align


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 7.8.2014, 12:44; Ответить: stixia007
Сообщение #4


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


x64, ну вот да, мне нужно объединить вертикальные ячейки чтоб картинка была не на певой а на всех п получается по центру.
Код
<td rowspan="?">[img]http://warick.ru/uploads/posts/2014-08/1407397763_character.gif[/img]</td>

Не много не понял как работает этот атрибут.

Вот сделал:

Код
<table border="1" height="1" width="500">
<tr>
<td rowspan="0">[img]http://warick.ru/uploads/posts/2014-08/1407397763_character.gif[/img]</td>
<td style="background-color:#ffffcc">[b]Урон:[/b] [u]47 - 57[/u]
[b]Дальность атаки:[/b] [u]128[/u]
[b]Броня:[/b] [u]2.6[/u]
[b]Обзор:[/b] [u]1800 / 800[/u]</td>
<td style="background-color:#ffffcc">[b]Сторона:[/b] [u]Sentinel[/u]
[b]Скорость атаки:[/b] [u]1.7[/u]
[b]Тип атаки:[/b] [u]ближний[/u]
[b]Скорость:[/b] [u]300[/u]</td>
<td style="background-color:#ffffcc">[color=#FF6666][b]Сила:[/b][/color] [u]21+2,7[/u]
[color=#66FF99][b]Ловкость:[/b][/color] [u]14+1,3[/u]
[color=#66FFFF][b]Разум[/b]:[/color] [u]16+1,5[/u]</td>
</tr></table>




Видно же что картинка некорректно стоит.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Caterpillar
Caterpillar
сообщение 7.8.2014, 12:48; Ответить: Caterpillar
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 316
Регистрация: 11.7.2014
Из: Харьков
Поблагодарили: 96 раз
Репутация:   10  


stixia007, rowspan\colspan=3
Эти атрибуты содержат число объединеных исходных ячеек, а не число нужных


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zhezkazganetcs
Zhezkazganetcs
сообщение 7.8.2014, 12:55; Ответить: Zhezkazganetcs
Сообщение #6


время дороже денег...
*****

Группа: Active User
Сообщений: 819
Регистрация: 1.11.2013
Из: Гомель, РБ
Поблагодарили: 361 раз
Репутация:   34  


я конечно не спец, но если хотите, что бы текст "обтекал" картинку, то нужно использовать тег - <img style="float: left;


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 7.8.2014, 13:24; Ответить: stixia007
Сообщение #7


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Да пробовал всё криво...
Вот как хочу сделать:

Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 7.8.2014, 13:34; Ответить: x64
Сообщение #8


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3427
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2749 раз
Репутация:   289  


stixia007, для этого никаких colspan`ов не нужно
хотя бы так:
Код
<table border="1" width="500">
<tr style="background-color:yellow" valign="center">
<td style="background-color:white; text-align:left; width:130px;"><img alt="" src="http://warick.ru/uploads/posts/2014-08/1407397763_character.gif"></td>
<td>Урон: 47 - 57
Дальность атаки: 128
Броня: 2.6
Обзор: 1800 / 800</td>
<td>Сторона: Sentinel
Скорость атаки: 1.7
Тип атаки: ближний
Скорость: 300</td>
<td>Сила - 21+2,7
Ловкость - 14+1,3
Разум - 16+1,5</td>
</tr></table>

стронги сами расставите)

но гораздо лучше всё оформление вынести в css

Сообщение отредактировал x64 - 7.8.2014, 13:34


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Caterpillar
Caterpillar
сообщение 7.8.2014, 13:37; Ответить: Caterpillar
Сообщение #9


Бывалый
****

Группа: User
Сообщений: 316
Регистрация: 11.7.2014
Из: Харьков
Поблагодарили: 96 раз
Репутация:   10  


Достаточно было сразу в пайнте нарисовать "как надо", а то все гадали на кофейной гуще


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 7.8.2014, 14:11; Ответить: stixia007
Сообщение #10


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Всё спасибо, именно так и хотел :) Пошёл делать.

А я хз :) http://warick.ru/dota-heroes/29-admiral-kunkka.html
Опять та-же песня.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вёрстка. Per aspera ad html.
С радостью принимаю заказы по вёрстке.
3 ValeryRar 454 1.12.2017, 11:02
автор: ValeryRar
Открытая тема (нет новых ответов) Исправлю HTML ошибки на страницах Вашего сайта
10 guruapps 1206 30.11.2017, 22:59
автор: maxim1249
Горячая тема (нет новых ответов) HTML-вёрстка по доступной цене
30 graycat777 11484 25.11.2017, 23:56
автор: graycat777
Горячая тема (нет новых ответов) [предлагаю] Качественные услуги по PHP/HTML/CSS/JS, любые движки
Услуги программирования
31 Alexandr_js 10054 2.11.2017, 16:36
автор: gretskov
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка шаблонов на joomla, WP, html
27 skiv86 8009 7.10.2017, 15:36
автор: skiv86


 



RSS Текстовая версия Сейчас: 16.12.2017, 15:21
Дизайн