Tablas con CSS

[aguila_393]

Estoy haciendo una tabla en CSS, despues de buscar en internet encontre para hacerlo de esta manera:

Código HTML:

<div class="tabla">
                <div class="fila">
                    <div class="columna">
                        Materia
                    </div>
                    <div class="columna">
                        Fecha
                    </div>
                    <div class="columna">
                        Resultado
                    </div>
                </div>
</div>
 

Y el css es el siguiente:

Código CSS:

.tabla {
    display:table;
    border-spacing:5px;
}
 
.fila {
    display:table-row;
}
 
.columna {
    display:table-cell;
    width:20%;
}
 

El problema es que no funciona, es como que no hace ninguna tabla, me ponele todas las columnas una abajo de la otra, como si creara divs directamente, graficamente me quedaria asi:

Materia
Fecha
Resultado

Cuando tendrian que ser columnas.

Alguien tiene idea porque pasa esto? Supuse que seria que la div se comporta como un bloque y no deja que otra se ponga al costado, pero tampoco puedo ponerle display inline porque ya tengo puesto display table-cell y solo puedo poner uno.

[pzin]

¿Con qué navegador lo estás viendo? Así como lo pones funciona perfectamente:

[hackjose]

Solo una sugerencia
Materia Fecha Resultado parecen ser buenos titulos para un elemento <table>
Por que quieres usar divs en lugar de table

Semanticamente me parece correcto el uso de table para este caso

salu2

[aguila_393]

Iniciado por hackjose

Solo una sugerencia
Materia Fecha Resultado parecen ser buenos titulos para un elemento <table>
Por que quieres usar divs en lugar de table

Semanticamente me parece correcto el uso de table para este caso

salu2

Si lo se, estoy usando los css para ver como es que funcionan y de paso aprender algo nuevo.

Para que es que se usan especifamente estas propiedades?