Crear tres columnas

Hola, estoy intentando crear tres columnas, la primera del 1 al 5, la segunda del 6 al 10 y la tercera del 11 al 15.

Como esto (tiene que ser así, con separación entre las columnas):

1 6 11
2 7 12
3 8 13
4 9 14
5 10 15

Utilizo este código:

Código HTML :

<ul class="tres_columnas">
 <li>1</li>
 <li>2</li>
 <li>3.</li>
 <li>4.</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 <li>13</li>
 <li>14</li>
 <li>15</li>
</ul>

Código CSS :

ul{
  width:960px;
  overflow:hidden;
}
li{
  line-height:1.5em;
  float:left;
  display:inline;
}
.tres_columnas li { width:33.333%; }

De esta forma me crea una sola columna, no sé cómo hacer que a partir de cierto número forme otra columna al lado.

Sabéis cómo puedo solucionarlo??

Gracias...

Puedes usar la propiedad "column-count" para decir cuántas columnas quieres:

Código CSS :

.tres_columnas {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

Necesitas usar los prefijos para que funcione en todos los navegadores, y no funcionará en Internet Explorer 9.

Si quieres algo más universal, puedes optar por poner cada columna en un div o un ul.

Código :

<ul class="columna columna-1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul class="columna columna-2">
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<ul class="columna columna-3">
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

Y posicionar las columnas con display: inline-block o con float.

Por que mejor no usar una tabla?

Gamernoob escribió:

Porque una tabla muestra los datos en horizontal, mientras que el OP dice que deben ser verticales.