Таблица HTML с изображениями

, поэтому я в настоящее время занимаюсь созданием сайта для отдела драмы в университете, и я хочу добавить 3 изображения рядом (с интервалом между ними). Они также должны иметь подписи. Но заголовок должен иметь заголовок (который отличается от самого заголовка), за которым следует сама подпись. осмотрев здесь и в других местах, я решил, что смогу сделать это, используя таблицу, поскольку размер форматирования был бы самым простым способом. Я был на этой части сайта почти 1 месяц и пробовал множество других методов (divs, tables и т. Д.). Мне было интересно, сделал ли кто-то еще что-то подобное и сможет дать некоторые советы. Сайт в настоящее время находится здесь: drama site. Любая помощь будет оценена (я надеюсь, что это соответствует рекомендациям, первый раз Аскер)Таблица HTML с изображениями

Edit: Ниже приводится часть кода, мне нужна помощь с:

function windowSize() { 
 
    var w = var w = document.getElementById('body').clientWidth; 
 
    document.getElementById('newsTable').style.width = w + 'px'; 
 
    document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px'; 
 
}

<body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()"> 
 
    <table id="newsTable" cellpadding="0" border="0"> 
 
    <tr> 
 
     <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">1</td> 
 
     <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">2</td> 
 
     <td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">3</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="newsItems" align="center">4</td> 
 
     <td id="newsItems" align="center">5</td> 
 
     <td id="newsItems" align="center">6</td> 
 
    </tr> 
 
    </table> 
 
</body>

I не хотите, чтобы изображения были такими большими, как они есть в ссылке, я бы хотел, чтобы они были немного меньше. Мне также понравится какая-то комната между ними. В настоящее время, когда страница становится больше, изображение начинает повторяться. Если бы я взял повтор, тогда у него было бы пустое место, где обычно повторялось бы

источник

2014-12-06 hassassin96

Можете ли вы изменить свой вопрос и добавить часть кода, в котором вам нужна помощь? – ekad

С одной стороны, некоторые изображения с более высоким разрешением могут помочь. Попробуйте установить для каждого элемента значения границы или отступов в элементах данных таблицы, чтобы увидеть, что вам нравится на изображениях. –

Возможно, самым приятным вариантом было бы использовать бутстрап. Он может сделать для вас много работы Columner. Но если это звучит немного сложно, вот простая скрипка с тремя изображениями бок о бок. http://jsfiddle.net/44uv9a2m/

Я просто обертываю изображения и их подписи в divs, а затем фиксируя их ширину.

.oneThird{ 
 
    width:30%; 
 
    float:left; 
 
    margin:.5%; 
 
} 
 
.oneThird img{ 
 
    width:100%; 
 
}

<div class="oneThird"> 
 
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img> 
 
    <p>Caption</p> 
 
</div> 
 
<div class="oneThird"> 
 
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img> 
 
    <p>Caption</p> 
 
</div> 
 
<div class="oneThird"> 
 
    <img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img> 
 
    <p>Caption</p> 
 
</div>

* Редактировать * Это базовый пример начальной загрузки. http://www.bootply.com/n6AdJPYIe3

источник

2014-12-06 02:09:48

Так что это работает довольно хорошо и в основном то, что я хочу. Как я могу сосредоточиться на своей странице? или как я могу получить его, так что правая сторона выравнивается с остальной частью сайта? http://www.queensu.ca/drama/template.html – hassassin96

Это скорее зависит от того, как выглядит остальная часть вашего сайта, но обычно, если у вас есть тело, установленное на 100% ширину и высоту, и этот div находится под телом, тогда он должен выглядеть хорошо, а затем следовать примеру с остальными вашими div. Я не уверен, насколько сложно вы хотите попасть на свой сайт. –

Таблица HTML с изображениями

ответ

Смежные вопросы