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 also available as XML with similar layout, but much reduced markup, replacing divs and classes by custom tags.
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.
Styling separate columns and row is also possible with tables and col/rowgroups and such but using the above technique may have advantages when further developed:
© 2004-2006, Mark Schenk.