Как сделать границу внутри таблицы?

Question

Я новичок в html и задавался вопросом, как я могу сделать границу внутри таблицы? То, что я пытаюсь сделать именно это:

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

код для того, что я показал на второй картине здесь:

<table border="4"> 
    <caption>Table - 6 -</caption> 
     <tr> 
      <th rowspan="2">Item 1</th> 
      <td>Item 2</td> 
      <td>Item 3</td> 
      <td>Item 4</td> 
     </tr> 
     <tr> 
      <td>Item 5</td> 
      <td>Item 6</td> 
      <td>Item 7</td> 
     </tr> 

</table> 

Я пытаюсь использовать без использования CSS на веб-странице. Мне бы хотелось понять больше HTML.

Answer 1

Без CSS единственными элементами HTML, которые имеют собственные границы, являются table и img. Я бы с вложенной таблицы здесь:

<table border="4"> 
 
    <caption>Table - 6 -</caption> 
 
     <tr> 
 
      <th rowspan="2"><table border="4"><tr><td>Item 1</td></tr></table></th> 
 
      <td>Item 2</td> 
 
      <td>Item 3</td> 
 
      <td>Item 4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Item 5</td> 
 
      <td>Item 6</td> 
 
      <td>Item 7</td> 
 
     </tr> 
 
</table>

Вы никогда не хотели бы сделать это в реальной веб-сайт, хотя, как HTML не следует использовать для представления, только CSS.

Answer 2

Вы можете поставить "Пункт 1" внутри <span> элемента и стиля продолжительность:

<table border="4"> 
    <caption>Table - 6 -</caption> 
     <tr> 
      <th rowspan="2"><span style="border:2px solid black;">Item 1</span></th> 
      <td>Item 2</td> 
      <td>Item 3</td> 
      <td>Item 4</td> 
     </tr> 
     <tr> 
      <td>Item 5</td> 
      <td>Item 6</td> 
      <td>Item 7</td> 
     </tr> 

</table> 

Смотрите скрипку: https://jsfiddle.net/tfs4f8sd/

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