In a quest to display mathematics on the web, it was desirable to find a method to display matrices by means of X(HT)ML and CSS. Currently no real matrices can be created due to limitations in border styles, but a close attempt is possible. The approach outlined below allows ordening in columns (i.e. vectors) instead of rows such as tables, requires little markup and scales quite easily. It is however limited, because the border-colours have to be chosen with care.
This page is the XML example page and the elements for the matrices have been replaced by short and logical custom tags. So for instance a matrix is started with <m>, a vector with <v> and a cell with <c>.
The outer div with the borders is display:inline-table (to allow multiple matrices on one line), the vectors are display:inline-table (to allow multiple vectors in one matrix) and the cells are display:block (which will force the cells to show below each other). In this setup both the vectors and the cells are coloured. Individual styling is always possible of course.
The next example uses transpose vectors to create rows. The rows are display:table and the cells are display:table-cell. It is to be solved for a vector.
A difficulty here is the rows cannot easily be given a background-color, as possible with the vectors, because background-color won't apply to table-row.