Центрировать текст в таблице HTML

0

Я только начал программировать в HTML и, похоже, не понял этого. Я хочу сосредоточить текст в таблице, и хотя мне удалось сделать это уже с простой HTML-страницей, возникают некоторые проблемы, когда я хочу перенести вещи на следующий уровень (что, учитывая мой небольшой опыт работы с HTML, все еще довольно низкий).

Это моя таблица:

<table id="Passo1" style="border:5px solid rgba(0, 0, 0, 0.7);border-radius: 10px; background-color:rgba(0, 0, 0, 0.5); text-shadow:0.5px black; color: white" width="400px" class="send">
    <th colspan="20px"  class="centra_crl"><font size="20px"> Enviar relatório </font></th>
</tr>
<tr>
    <td class="centra_crl"> A enviar o relatório do carro para a sua oficina... </td>
</tr>
<tr></tr>
</table>

Я хочу, чтобы мой стол начал скрываться. Для этого я использую:

document.getElementById("Passo1").style.display="none";

Класс "centra_crl":

.centra_crl{
  text-align: center;
}

Если я не скрываю таблицу при загрузке страницы, все в порядке. Весь текст помещается в центр. Проблема в том, что когда я запускаю его скрытым, а затем показываю его, текст, кажется, теряет свойство "center", отображаемое слева. Кроме того, что странно, что если я позже заменю текст

function sendReport2(){
           var el = document.getElementById('Passo1');
            el.rows[1].cells[0].innerHTML = "Concluído! Verifique no calendário a data da sua próxima visita.";
}

как th, так и td отображаются в правильном положении. Кажется, что свойство центра ничего не делает для таблицы, когда я показываю ее.

Вы, ребята, знаете, что может быть проблемой? Я подозреваю, что это может быть очень глупо, но я не могу понять это.

Приносим извинения заранее, если я не написал это сообщение правильно. Я здесь не обычный и всегда путаюсь с интервалом.

Благодарю!

  • 0
    НЕ используйте таблицы! stackoverflow.com/questions/83073/… Редактировать: Уточнение: НЕ используйте таблицы для этого!
  • 0
    Вы должны отделить презентацию от контента , избегая встроенных стилей. Элемент <font> устарел, вместо него используйте CSS. Таблицы должны использоваться только для табличных данных, а не для презентационных целей.
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

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

У вас есть правильная идея с использованием CSS в некоторых местах, но у вас есть несколько вещей, которые вы хотите исправить:

  • Как упоминалось в комментариях, не используйте таблицы для макета; вместо этого используйте CSS. Если вы фактически показываете табличные данные, пойдите для этого, но ваш пример кода выглядит как макет, а не данные.
  • Тег font устарел некоторое время. Используйте CSS для управления всеми аспектами представления ваших документов, включая семейство шрифтов, размер, вес, цвет и т.д.
  • Как правило, плохой практикой является использование встроенных стилей, так как гораздо сложнее управлять этими стилями и переопределять их другими правилами в других местах. Попробуйте централизовать все свои стили в блоке style в заголовке документа или в отдельной таблице стилей, которую вы ссылаетесь на элемент link.
  • Вместо того, чтобы использовать JavaScript для скрытия элемента, если вы хотите, чтобы что-то начало скрываться, примените правило display: none CSS display: none к его ассоциированному классу. После его загрузки и выполнения любой обработки вы можете использовать JavaScript для добавления или изменения класса таблицы на то, что отображается так, как вы хотите.

В общем, вам нужно потратить некоторое время на изучение HTML и CSS, прежде чем идти слишком далеко. В этом примере есть много ошибок, которые собираются вернуться, чтобы преследовать вас позже, если вы не потратите время на изучение правильного пути.

  • 0
    Я даже не знаю, почему я использую таблицы ...: D Это действительно только для макета. Я последую твоим советам и уберу столы. Спасибо за подробный ответ!
0

Что вы делаете, чтобы показать таблицу? Пользователь нажимает кнопку, чтобы изменить отображение: none property?

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

Возможно, вы захотите добавить класс центра в свою таблицу одним и тем же кликом, который заставит таблицу отображать на странице. Это может быть вашей проблемой, если это не сработает, пожалуйста, укажите пример lave, если это возможно, или jsfiddle.

  • 0
    Спасибо за предложение. Я попытался добавить центральный класс с щелчком, который изменяет свойство, но все осталось прежним. Я думаю, что я буду следовать почти всем советам не использовать таблицы. : D

Ещё вопросы

Сообщество Overcoder
Наверх
Меню