Выровнять ячейки внутри таблицы

F@!nT · October 4, 2009

Примерный код:

<table border="1" width="100%">
 <tbody>
  <tr>
   <td>
	<table cellspacing="0" cellpadding="0" border="1">
	 <tr>
	  <td>Картинка</td>
	 </tr>
	 <tr>
	  <td>txt</td>
	 </tr>
	</table>
   </td>


   <td>
	<table cellspacing="0" cellpadding="0" border="1">
	 <tr>
	  <td>Картинка</td>
	 </tr>
	 <tr>
	  <td>txt</td>
	 </tr>
	</table>
   </td>
  </tr>
 </tbody>
</table>

Надо выровнять ячейки внутри, при этом не фиксировав высоту и ширину ячеек. Голову ломал день)

спасибо за помощь)

DjTarik · October 4, 2009

vertical-align: middle;

text-align: center;

B зачем столько таблиц? Одна таблица - в ней картинка через <img /> и снизу подпись в

F@!nT · October 4, 2009

vertical-align: middle;
text-align: center;
B зачем столько таблиц? Одна таблица - в ней картинка через <img /> и снизу подпись в

vertical-align: middle;

text-align: center;

не помогает.

"B зачем столько таблиц? Одна таблица - в ней картинка через <img /> и снизу подпись в "

подпись под картинкой будет скакать в зависимости от размера картинки

psywalker · October 4, 2009

td { vertical-align: top;} выравниваешь ячейки по верхнему краю

Далее делаешь отдельную строку для текста, отдельную для картинок

F@!nT · October 4, 2009

td { vertical-align: top;} выравниваешь ячейки по верхнему краю
Далее делаешь отдельную строку для текста, отдельную для картинок

Получилось так:

про строки не очень понял. можно пример?

psywalker · October 4, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<style type='text/css'>
* { margin: 0;}


	td { border: 1px solid #000; vertical-align: top;}
</style>
</head>

<body>
<table>
	<tr>
		<td>Картинка 1<br /><br /><br /></td>
		<td>Картинка 2</td>
	</tr>
	<tr>
		<td>Подпись для Картинки 1</td>
		<td>Подпись для Картинки 2</td>
	</tr>
</table>
</body>
</html>

F@!nT · October 4, 2009

Спасибо)

Пришлось цикл вывода немного поменять) сразу не додумался)

psywalker · October 4, 2009

Спасибо)
Пришлось цикл вывода немного поменять) сразу не додумался)

молодец, приходи ещё

F@!nT · October 4, 2009

Оу, вот ещё вопрос. Картинки не выравниваются по центру.

Вот отрывок кода:

<table style="height: 100%;" border="1" width="100%">
<tbody>
<tr align="center">
<td align="center">
<div class="thumbscontainer">
<ul class="thumbs">
<li>
<a href="/modx/assets/galleries/49/sm_poster_myagkoe_a3_100_3_confirmed.jpg" rel="lightbox_assets/galleries/49/gallery">
<img src="/modx/assets/galleries/49/tn_sm_poster_myagkoe_a3_100_3_confirmed.jpg" class="thumbnail" title="  » Click to zoom ->" alt="  » Click to zoom ->" />
</a>
</li>
</ul>
</div>
</td>
<td align="center">
<div class="thumbscontainer">
<ul class="thumbs">
<li>
<a href="/modx/assets/galleries/48/filebotuhb.jpg" rel="lightbox_assets/galleries/48/gallery">
<img src="/modx/assets/galleries/48/tn_filebotuhb.jpg" class="thumbnail" title="  » Click to zoom ->" alt="  » Click to zoom ->" />
</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td align="center">
<a href="rr/r/49.html">txt</a>
</td><td align="center">
<a href="rr/r/48.html">txt</a>
</td>

</tr>
</tbody>
</table>

Прошу прощение за неправильное оформление кода)

psywalker · October 4, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<style type='text/css'>
* { margin: 0;}

	table { width: 100%;}	
	td { border: 1px solid #000; vertical-align: top; }

	tr.middle td { vertical-align: middle;}
	tr.middle td img { vertical-align: middle;}
</style>
</head>

<body>
<table>
	<tr class="middle">
		<td>Картинка 1</td>
		<td>Картинка 2</td>
	</tr>
	<tr>
		<td>Подпись для Картинки 1</td>
		<td>Подпись для Картинки 2</td>
	</tr>
</table>
</body>
</html>

Edited October 4, 2009 by psywalker

F@!nT · October 4, 2009

надо по горизонтале выровнять)

psywalker · October 4, 2009

надо по горизонтале выровнять)

tr.middle td { vertical-align: middle; text-align: center;}

F@!nT · October 4, 2009

tr.middle td { vertical-align: middle; text-align: center;}

не работает..

psywalker · October 4, 2009

не работает..

Обязательно две строчки

tr.middle td { vertical-align: middle; text-align: center;}

tr.middle td img { vertical-align: middle; text-align: center;}

F@!nT · October 4, 2009

Обязательно две строчки
tr.middle td { vertical-align: middle; text-align: center;}
tr.middle td img { vertical-align: middle; text-align: center;}

всё равно(

может проблема в дивах?

<div class="thumbscontainer">
<ul class="thumbs">

вот классы:

.thumbscontainer { 
margin-bottom: 20px;
float: left;
}

ul.thumbs { 
list-style-position: outside;
list-style-type: none;
list-style-image: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
}

если ставлю float на none, то все равно не выравниваются. если же на right, то картинки будут справа

psywalker · October 4, 2009

всё равно(
может проблема в дивах?
<div class="thumbscontainer">
<ul class="thumbs">
вот классы:
.thumbscontainer { 
margin-bottom: 20px;
float: left;
}

ul.thumbs { 
list-style-position: outside;
list-style-type: none;
list-style-image: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
clear: both;
}
если ставлю float на none, то все равно не выравниваются. если же на right, то картинки будут справа

попробуй диву тоже поставить выравнивание по центру, и извини, у меня мало времени

Sign In

Выровнять ячейки внутри таблицы

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information