Definition A table displays a collection of data grouped into rows.

The column headings can be set statically
or determined dynamically by the S10 framework.
Code HTML
<!-- Definition of the columns (static labels) -->
<div class="colheaders">
    <div class='colheadup' name="my_s10_field_1" 
         style='width:  80px;'>Column 1</div>

    <div class='colhead' name="my_s10_field_2" 
         style='width: 120px;'>Column 2</div>

    <div class='colhead' name="my_s10_field_3" 
         style='width:  90px;'>Column 3</div>
</div>

<!-- Definition of a table row -->
<form class='table' name='my_s10_folder'>
    <div class="tablerow">

        <div class='outputcelldiv' name="my_s10_field_1" 
             style='width:  80px;' ></div>

        <div class='outputcelldiv'  name="my_s10_field_2" 
             style='width: 120px;'></div>

        <div class='outputcelldiv' name="my_s10_field_3" 
             style='width:  90px;' ></div>
</div>
Example
Code HTML
<!-- Definition of the columns (dynamic labels) -->
<div class="colheaders">

    <div class='colhead output' 
         style='width: 80px;' name="vbeln">
    </div>

    <div class='colhead output desktop' 
         style='width: 120px' name="auart@text">
    </div>

    <div class='colhead output colheaddown' 
         style='width: 90px;' name="audat">
    </div>

    <div class='colhead output totals' 
         style='width: 80px; text-align: right;  
                --desktop-width: 120px;' 
         name="netwr">
    </div>

    <div class='colhead output landscape' 
         style='width: 50px' name="waerk">
    </div>

</div>

<!-- Definition of a table row -->
<form class='table' name='allorders'>

    <div class="tablerow" onclick="S10ToggleDetail(this);">

        <div class='outputcelldiv' style='width: 80px;' 
             name="vbeln"></div>

        <div class='outputcelldiv desktop' 
             style='width: 120px;' name="auart@text"></div>

        <div class='outputcelldiv' style='width: 90px;' 
             name="audat"></div>

        <div class='outputcelldiv' 
             style='width: 80px; text-align: right;  
                    --desktop-width: 120px;' 
            name="netwr">
        </div>

        <div class='outputcelldiv landscape' 
             style='width: 50px' name="waerk"></div>

</div>
Example
Component S10 Framework