Skip to content Skip to navigation

Connexions

You are here: Home » Content » Presentation table elements

Navigation

Content Actions
  • Download module PDF
  • Add to ...
    Add the module to:
    • My Favorites
    • A lens
    • An external social bookmarking service
    • My Favorites (What is 'My Favorites'?)
      'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.
    • A lens (What is a lens?)

      Definition of a lens

      Lenses

      A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

      What is in a lens?

      Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

      Who can create a lens?

      Any individual Connexions member, a community, or a respected organization.

    • External bookmarks
  • E-mail the author

Recently Viewed

This feature requires Javascript to be enabled.

Presentation table elements

Module by: Sunil Kumar Singh

Summary: Table in mathematical display plays the role placing elements / expressions in different position on two dimensional matrix.

Note: You are viewing an old version of this document. The latest version is available here.

Table element is applied for variety of rendering requirements, in addition to its primary use for drawing a table. The applications of table frame work include displaying two dimensional mathematical content like arrays and matrix, creation of labeled equations and enabling display of content in multiple rows equivalent to line break.

Consider the task to write two rows of equations on two consecutive lines :

3x + y = 6

2x – y = 5

How would we force two lines to be displayed in a single MathML constructor? We may probably display the lines as separate rows of a table without a frame and lines. In this sense, table frame work provides a facility, which is equivalent to forcing a new line.

Similarly, we may be required to number important equations so that the same can be referenced subsequently like :

3x + y = 6 …….. 1.1

In this context, the label attribute available for “mlabeledtr” element allows us to number the equation as above. A matrix, on the other hand, is implemented by a table construct without border and enclosed parentheses :

( x y z 1 2 3 ) ( x y z 1 2 3 )

The MathML employs six elements to render all sorts of table. However, there is a serious mis-match between specifications of some of these elements and implementation of the same by browsers. For this reason, we shall concentrate on three table forming elements namely "mtable", "mtr" and "mtd" elements, which together form the basic constructors for creating tables (only references to other elements has been given for other three elements).

Table elements

  1. mtable : creats table
  2. mlabeledtr : creats a labelled row
  3. mtr : creates a row
  4. mtd : creats a column
  5. maligngroup : Grouping element
  6. malignmark : creats alignment markings

“mtable” element “mtable” element

Specific attributes :   align rowalign columnalign groupalign alignmentscope columnwidth Specific attributes :   width rowspacing columnspacing rowlines columnlines frame Specific attributes :   framespacing equalrows equalcolumns displaystyle side minlabelspacing Specific attributes :   align rowalign columnalign groupalign alignmentscope columnwidth Specific attributes :   width rowspacing columnspacing rowlines columnlines frame Specific attributes :   framespacing equalrows equalcolumns displaystyle side minlabelspacing

The ‘mtable” element represents a table of rows and columns. It accepts only “mtr” or “mlabeldtr” elements as its child. Both of these define a single row in the table. The only difference between the two row elements is that “mlabeldtr” can be used to label the particular row defined by it. The “mtr” element represents a simple row. Each of these row forming elements takes child elements to define the columns.

The “mtable” element requires that all rows have same numbers of columns. If the columns in any row mismatches, then that row is padded with empty column(s). For example, when one column definition in the first row involving “y” is removed, then tables is rendered as shown below :

Example 1: Table short of one column


	    
    <m:math display="block">
<m:mtable frame="solid" columnlines="solid" rowlines="solid">
        <m:mtr>
          <m:mtd>
            <m:mi>x</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>1</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

x z 1 2 3 x z 1 2 3

Evidently, output is not what was intended. It is, therefore, always advisable to maintain same numbers of columns in each row. If there is no content, then that column should be kept as an empty column. Introducing the column definition back without any content restores the structure of table. 



          <m:mtd>
          </m:mtd>

The out put now is :

Example 2: Table with same numbers of columns


	    
    <m:math display="block">
  <m:mtable frame="solid" columnlines="solid" rowlines="solid">
        <m:mtr>
          <m:mtd>
            <m:mi>x</m:mi>
          </m:mtd>
          <m:mtd>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>1</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

x z 1 2 3 x z 1 2 3

Displaying table Displaying table

Attribute value types

  • align (default : "axis") : (top | bottom | center | baseline | axis) [ rownumber ]
  • rowalign (default : "baseline") : (top | bottom | center | baseline | axis)+
  • columnalign (default : "center") : (left | center | right) +
  • groupalign (default : "left") : group-alignment-list-list
  • alignmentscope (default : "true") : (true | false) +
  • columnwidth (default : "auto") : (auto | number h-unit | namedspace | fit) +
  • width (default : "auto") : auto | number h-unit
  • rowspacing (default : "1.0ex") : (number v-unit) +
  • columnspacing (default : "0.8em") : (number h-unit | namedspace) +
  • rowlines (default : "none") : (none | solid | dashed) +
  • columnlines (default : "none") : (none | solid | dashed) +
  • columnlines (default : "none") : none | solid | dashed
  • frame (default : "none") : none | solid | dashed
  • framespacing (default : 0.4em, 0.5ex) : (number h-unit | namedspace) (number v-unit | namedspace)
  • equalrows (default : "false") : true | false
  • equalcolumns (default : "false") : true | false
  • displaystyle (default : "false") : true | false
  • side (default : "right") : left | right | leftoverlap | rightoverlap
  • minlabelspacing (default : "0.8em") : number h-unit | namedspace

The default setting for “frame”, “rowlines” and columnlines are “none”. For this reason, the rendering of a table with bare “mtable” results in a frame-less invisible table. Only content of the columns are displayed. A 2X3 table is drawn with default values in the example given here.

Example 3: Table with defualt values


	    
    <m:math display="block">
      <m:mtable>
        <m:mtr>
          <m:mtd>
            <m:mi>x</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>y</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>1</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

x y z 1 2 3 x y z 1 2 3

The “mtable” element has large number of attributes and it would be difficult to use all of them. Good news is that we are using only few of them at the most. The dimensional attributes of table frame, rows and columns are largely determined by the implementation of a particular renderer. Also, the default values of key attributes are so chosen that default table architecture is suitable for most of the situations. For example, width controlling attributes “width” and “columnwidth” are set to “auto”. This means that width of the table as a whole and the columns shall be adjusted in accordance with the algorithm of the renderer, whereby they are expected to be set “as needed”. We may ofcourse set specific values whereby content in the table is expected to be wrapped around.

Assignment to table attributes follows a typical format. The reason for special mechanism arises out of the fact that we are required to set some the attributes on individual row or column. The format is simple. It is presented with a “+” sign at the end indicating that the attribute can be applied to individual rows and columns. A general format for columns would expand explained here :

(x y z)+ : It is a sequence of values separated by space. The values can be one or more (i.e. can be repeated) of x,y and z for corresponding columns. Starting from the first, the values are applied till the last column. If there are more values than required, then remaining would be discarded and if there are less than required then the last of the sequence would be repeated.

This means that a large number of attributes such as “rowalign”, “columnalign”, “columnwidth”, “rowspacing”, “columnspacing”, “rowlines” and “columnlines” can be set to individual rows and columns with the valid values as specified above.

The example here illustrates setting of “columnalign” and “rowalign” elements. Note that the impact of “columnalign” is more visible than “rowalign” element.

Example 4: Aligning content


	    
    <m:math display="block">
      <m:mtable frame="solid" columnlines="solid" rowlines="solid" 
       rowalign="top baseline center" columnalign="right center left">
        <m:mtr>
          <m:mtd>
            <m:mi>xyx</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>y</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>12</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3111</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

xyx y z 12 2 3111 xyx y z 12 2 3111

"mtr" element "mtr" element

Specific attributes :   rowalign columnalign denomalign groupalign Specific attributes :   rowalign columnalign denomalign groupalign

Attribute value types

  • rowalign (default : inherited) : top | bottom | center | baseline | axis
  • columnalign (default : inherited): (left | center | right) +
  • groupalign (default : inherited): group-alignment-list-list

Rows are drawn from top to bottom. Entries in the row can be aligned separately on individual row. This row level setting of “rowalign” attribute shall override “rowalign” attribute setting on table level via “mtable” element. The “columnalign” attribute allows specifying individual column alignments for that particular row.

Example 5: Alignment setting on individual row


	    
    <m:math display="block">
      <m:mtable frame="solid" columnlines="solid" rowlines="solid" rowalign="top" columnalign="right">
        <m:mtr>
          <m:mtd>
            <m:mi>xyx</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>y</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr rowalign="bottom" columnalign="left">
          <m:mtd>
            <m:mn>12</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3111</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable>    
  
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

xyx y z 12 2 3111 xyx y z 12 2 3111

There appears serious gap in the specification for this element and implementation of the same by the browsers. For this reason, the "mlabeledtr" element is not described. Also related "side" and "minlabelspacing" of "mtable" elements are skipped. Instead, an example with equivalent effect for creating a labeled display is included in the next section titled “Application”.

The implementation of alignment within a cell is also not implemented by browsers at present. As such, "maligngroup" and "malignmark" elements along with associated "groupalign" attribute of "mtable" element are not considered.

Applications Applications

Highlighting rows and columns with dashed line Highlighting rows and columns with dashed line

Control on each column and row is not limited to alignment. The flexibility at the lowest level of creating table is extended to lines bordering table cells as well.

We can highlight a portion of table by assigning a particular row and column with “dashed” lines. This effect can be achieved by specifying individual row and column lines to be “dashed” as against “solid” or “none”. In the table here first row and column lines are set to none, while second row and column lines are set to “dashed”.

Example 6: Highlighting rows and columns


	    
    <m:math display="block">
     <m:mtable frame="solid" rowlines="none dashed" 
     columnlines="solid dashed">

        <m:mtr>
          <m:mtd>
            <m:mi>x</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>y</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>a</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>b</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>c</m:mn>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>1</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

x y z a b c 1 2 3 x y z a b c 1 2 3

Rows of equations Rows of equations

New rows in table can be introduced with “mtr” row element. This behavior is handy in displaying rows of mathematical expressions, using bare table as shown in the example :

Example 7: Rows of equations


	    
    <m:math display="block">
      <m:mtable>
        <m:mtr>
          <m:mtd>
            <m:mi>3x + y </m:mi>
          </m:mtd>
          <m:mtd>
            <m:mo>=</m:mo>
          </m:mtd>
          <m:mtd>
            <m:mn>6</m:mn>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>2x – y </m:mn>
          </m:mtd>
          <m:mtd>
            <m:mo>=</m:mo>
          </m:mtd>
          <m:mtd>
            <m:mn>4</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

3x + y = 6 2x – y = 4 3x + y = 6 2x – y = 4

Labelled equation Labelled equation

The label row is convenient to write numbered equation as shown here. This special row is implemented with "mlabelmtr" element.

Example 8: Labelled row : equation number


	    
    <m:math display="block">
<m:mtable> 
        <m:mlabeledtr> 
          <m:mtd> 
            <m:mrow> 
              <m:mi>E</m:mi> 
              <m:mo>=</m:mo> 
              <m:mrow> 
                <m:mi>m</m:mi> 
                <m:msup> 
                  <m:mi>c</m:mi> 
                  <m:mn>2</m:mn> 
                </m:msup> 
              </m:mrow> 
            </m:mrow> 
          </m:mtd> 
               <m:mtd> 
               <m:mtext> (1.1) </m:mtext> 
              </m:mtd> 
        </m:mlabeledtr> 
      </m:mtable> 
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

E = m c 2 (1.1) E = m c 2 (1.1)

Matrix Matrix

Use of parentheses and table without frame can conveniently be used to represent matrix as illustrated in the example here.

Example 9: Matrix


	    
    <m:math display="block">
        <m:mo> ( </m:mo>
      <m:mtable>
        <m:mtr>
          <m:mtd>
            <m:mi>x</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>y</m:mi>
          </m:mtd>
          <m:mtd>
            <m:mi>z</m:mi>
          </m:mtd>
        </m:mtr>
        <m:mtr>
          <m:mtd>
            <m:mn>1</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>2</m:mn>
          </m:mtd>
          <m:mtd>
            <m:mn>3</m:mn>
          </m:mtd>
        </m:mtr>
      </m:mtable>
        <m:mo> ) </m:mo>
    </m:math>

Save the file after editing as “test.xml”. The display looks like :

( x y z 1 2 3 ) ( x y z 1 2 3 )

Comments, questions, feedback, criticisms?

Send feedback