Блог

Главная - Вопросы по программированию - Почему в моей таблице нет линий вокруг строк и столбцов?

Почему в моей таблице нет линий вокруг строк и столбцов?

#html

#HTML

Вопрос:

Я очень новичок в HTML, поэтому, пожалуйста, извините меня, если этот вопрос очень простой.

Я создал таблицу с помощью . Когда я смотрю на свою таблицу, нигде нет строк. Могу ли я сделать так, чтобы линии появлялись вокруг ячеек?

Ответ №1:

Базовая реализация таблицы была бы:

 <table border=1>
 <thead><tr><td>#</td><td>Name</td></tr></thead>
 <tbody>
  <tr><td>1</td><td>One</td></tr>
  <tr><td>2</td><td>Two</td></tr>
  <tr><td>3</td><td>Three</td></tr>
  <tr><td>4</td><td>Four</td></tr>
 </tbody>
</table>

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

 <table cellspacing=0 style="border:1px solid #ccc;">
 <thead><tr><td>#</td><td>Name</td></tr></thead>
 <tbody>
  <tr><td>1</td><td>One</td></tr>
  <tr><td>2</td><td>Two</td></tr>
  <tr><td>3</td><td>Three</td></tr>
  <tr><td>4</td><td>Four</td></tr>
 </tbody>
</table>

Комментарии:

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

2. это был просто пример, чтобы показать, как это работает, поскольку парень новичок в HTML. Конечно, это не установило бы границы для каждой ячейки таблицы.

Ответ №2:

С помощью свойства CSS border

В Opera есть руководство по веб-стандартам, которое включает большой раздел по CSS, если вам это нужно.

Ответ №3:

Вы можете использовать:

 td, th {
    border: 1px solid #ccc;
    /* border-width border-style border-color */
}

Конечно, вы могли бы использовать и длинные версии:

 td, th {
    border-top-width: 1px;
    border-top-style: solid; /* double, dashed, dotted... */
    border-top-color: #ccc;
}

И то же самое для border-left , border-right и border-bottom …