Почему некорректно работает ? (html css)

Пытаюсь разобраться с . Подскажите почему не отображаются надписи 'привет' и 'пока'?

Код

<!doctype html>

<html>
  <head>

    <meta charset='utf-8'>
    <style>
      table {
        display: table
      }
      #column1 {
        display: table-column
      }
      #column2 {
        display: table-column
      }
      #row11 {
        display: table-row
      }
      #row12 {
        display : table-row
      }
    </style>
  </head>

  <body>
    <table>
      <div id='column1'>
       <div id='row11'>
         Привет
       </div>
      </div>

      <div id='column2'>
        <div id='row12'>
          Пока
        </div>
      </div>

    </table>
  </body>
</html>

По задумке это должно выглядеть так: введите сюда описание изображения


Ответы (2 шт):

Автор решения: soledar10

Пример

table {
  width: 100%;
}

td {
  border: 1px solid #ccc;
}
<table>
  <tr>
    <td>Привет 1</td>
    <td>Пока 1</td>
  </tr>
  <tr>
    <td>Привет 2</td>
    <td>Пока 2</td>
  </tr>
</table>

→ Ссылка
Автор решения: Qwertiy
  1. display: table-column вообще не в тему.
  2. В разметке фигня - внутри table должны быть tr и td, а не divы.
→ Ссылка