Проблема с таблицей HTML
У меня проблема с таблицей HTML, которую я хотел бы лучше понять.
Предположим, у меня есть 3-строчный HTML-код
<table>
<tr>
<td style = "text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style = "text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan = "2">A very loooooooong string here</td>
</tr>
</table>
При очень длинном тексте содержимое первых двух строк кажется почти центрированным. Однако, если я перемещаю всю «Очень длинную строку» <td> в отдельный <table> внутри строки, я вижу, что остальное содержимое не центрируется. Почему отображение отличается, когда содержимое <td> находится внутри другой таблицы?
@Elie: В таблице два столбца!
Вы должны быть осторожны, экспериментируя с таблицами, убедитесь, что нет проблем css, вызывающих вложенные эффекты.
эээ, пожалуйста, дайте нам точный код и браузеры, которые вы используете
Если вы измените тег таблицы, чтобы он имел атрибут border = 1, вы могли бы лучше увидеть, что браузер «думает».
Ответы 4
Не могли бы вы привести второй пример? Когда я создал следующее, он все еще выглядел так же. Есть вероятность, что вы неправильно встроили таблицу в ячейку таблицы с colspan, равным 2.
<table border = "1">
<tr>
<td style = "text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style = "text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan = "2">
<table border = "1"><tr>
<td>A very loooooooong string here</td>
</tr></table>
</td>
</tr>
</table>
При объяснении проблемы с HTML лучше всего указать, какие браузеры использовались для тестирования ...
В любом случае, я провел быстрый тест с FF3 и IE6, и я не вижу описанного вами поведения: с вложенной таблицей длинная строка имеет немного больше отступов, но остальное содержимое все еще визуально центрировано.
Вы должны показать свой другой код. Мой:
<table>
<tr>
<td style = "text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style = "text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan = "2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
</tr>
</table>
Думаю, я понимаю, что вы имеете в виду, это вторая часть вашего вопроса, основанная на:
<table>
<tr>
<td style = "text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style = "text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<table><td colspan = "2">A very loooooooong string here</td></table>
</tr>
</table>
то я предполагаю, что причина, по которой содержимое таблицы отображается с выравниванием по левому краю, заключается в том, что внутренние теги таблицы скрывают colspan от внешней таблицы.
Ответ - прекратить использовать html для стилизации таблицы и вместо этого использовать CSS!
вы имеете в виду <td colspan = "2"> <table> <tr> <td> здесь очень длинная строка </td> </tr> </table> </td>
Верно. Вы не можете поместить <table> прямо внутри <tr>. И в таблицах нет ничего плохого. На самом деле это похоже на табличные данные, так что это, вероятно, правильное использование.
О, это не означало, что с таблицами что-то не так, просто использование стилей в html вместо использования CSS для отделения презентации от содержимого.
Если ваш вопрос заканчивается двумя таблицами, оригинал выглядит следующим образом:
<table>
<tr>
<td style = "text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style = "text-align:right;">B1</td>
<td>B2</td>
</tr>
</table>
И длинный текст сам по себе:
<table>
<tr>
<td colspan = "2">A very loooooooong string here</td>
</tr>
</table>
Тогда причина, по которой первые две строки первой таблицы больше не выглядят так, как будто они центрированы, заключается в том, что это не так - ТОЛЬКО, если вы сравниваете относительно второй таблицы.
Если вы отлаживаете border = "1" в своих атрибутах TABLE, вы увидите, что таблица, в которой они содержатся, сворачивается до самой широкой ячейки данных таблицы. Из-за этого они не выглядят так, как будто они центрированы, хотя они все еще остаются.
Добавьте произвольную ширину к первой таблице, и вы увидите, что они по-прежнему центрированы.
У вас есть тег colspan = 2 для таблицы, в которой есть только 1 столбец. Это ошибка?