Lists and Tables

Before studying the design of a menu, the beginning of a Web application, it is easier to see how a list is defined, or a table which is a list with two dimensions.

Listbox

The listbox tag contains elements of listitem type. It defines a list and the elements of the list.

<listbox>
    <listem label="Julia" />
    <listem label="Sandra" />
    <listem label="Sharon" />
</listbox>

Simple, but to define a table, a lot more of tags are needed.

Table

The possible components of a listbox, in addition to listbox and listitem, are the following tags:

listcols

Tag containing the design of columns, their function is only organizing, they do not contain the elements of the columns.

listcol

Represent a column. As many listcol that columns in the table.

listcell

Cell of the table, it is a component of listem which represents a line in a table (but only one element in a list).

listhead

Tag containing the list of headings. There is a heading by column.

listheader

Tag heading defining the title of a column.

In a synthetic way there will be the following organization for a table of three lines and three columns:

And that gives the following code:

<listbox>
    <listhead>
        <listheader></listheader>
        <listheader></listheader>
        <listheader></listheader>
    </listhead>
    <listcols>
        <listcol></listcol>
        <listcol></listcol>
        <listcol></listcol>
    </listcols>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
</listbox>

If by example listheaders contain Name, Age, City, then each group of listcell will contain in this order a name, an age, a city.

Example and code

• Demo code.zip.