Obmerk Kronen Obmerk Kronen - 1 month ago 11
HTML Question

HTML table with ueven cells elements in even rows ( colspan )

I am trying to built a very simple diagram or flow chart representation of buildings .

$floors = array( array( 'app_1','app_2','app_2_A' ),
array( 'app_3','app_4','app_5'),
array( 'app_6','app_7', 'app_8','app_9') ,
array( 'app_10','app_11', 'app_12','app_13') ,
array( 'app_14','app_15', 'app_16') ,
);

echo "<table border='2'>";

foreach ($floors as $floor ) {

$total_app = count( $floor);

echo "<tr>";

for($i = 0;$i < $total_app; $i++){
echo "<td colspan=" .$total_app. ">";
echo $floor[$i] . ' ( ' . $total_app . ' ) '; //brackets only for debug
echo "</td>";
}

echo "</tr>";

}


echo "</table>";


The result is :

Resultingtable

Problem is : The client wants all the rows to be of equal width , and not all the floors has the same number of apartments.

So I thought I will use 'colspan'. ( in code
echo "<td colspan=" .$total_app. ">";
)

Problem (2) : The script needs to work on 100´s of different buildings, so anything less than a full dynamic calculation for the 'colspan' will not work.

Colspan
, as I understand it , is actually relative to the max number of cells i have ( the row with largest number of elements ).

If that is true , then I need to know which array element ( floor ) has the highest count ( apartments ) - and then set this as the header - but I am not sure how to do it.

so


  1. how can I count the elements inside the nested array and compare them to see the "most populated floor"

  2. having done that - how can I calculate the
    colspan
    for each floor´s row of apartments in relation to that max. (
    colspan
    can have only int() and not fractions or percentage )

  3. A building is thought of as going from bottom to top, where as a table from top to bottom, so I need to flip the array , but keep the calculations of 'colspan'

  4. last but not least - I might be looking at this all wrong and there might be an easier way to achieve the wanted result ( maybe divs? ) - but I can not see one now - so if one exist - please do 'slap' me and show me the way ..



EDIT I

Like Said before : the solution must be flexible for all configurations :
Example :

$floors = array( array( 'app_1','app_2','app_2_A','app_2_B','app_2_C', 'app_2_D'),
array( 'app_3','app_4','app_5'),
array( 'app_6','app_7') ,
array( 'app_10','app_11', 'app_12','app_13') ,
array( 'app_14') ,
);


So any attempt to "hardcode" calculations of colspan will fail..
I need the Rows (floors) to be equal in width, and for the cells ( apartments ) to fill each row to full in such a way that if for example I have 2 apartments ,each will be 50% in width, if I have 4 apartments ,each will be 25% , 3 apartments - 33% and so on .

The question is how to achieve that with
colspan
if possible, or with any other method ..

Answer

Firstly colspan is stand of the row has 3 column, but I want the row combine all column in single cell, you could use colspan.

<?
$max_app = 0;
foreach( $floors as $floor ){
    $max_app = max(count($floor), $max_app);
}

echo "<table border='2'>";
foreach( $floors as $floor ){
    echo "<tr>";
    for( $a=0;$a<count($floor);$a++ ){
        if( $a+1 == count($floor) && $a+1 < $max_app ){
            //last cell, total number of cell in floor does not equals to $max_app
            echo "<td colspan='" . ($max_app - $a) . "'>";
        }else{
            echo "<td>";
        }
        echo $floor[$a];
        echo "</td>";
    }
    echo "</tr>";
}
echo "</table>";
?>

The alternative solution is using DIV with float: left; but the width of the DIV needed to know. Cause your requirement: all cell need using same width.

EDIT 1

Are you want a solution that ALL row is same width, and all cell width is same in each row???

share width in row, but all row is same width

<?
echo "<table border='0'>";
foreach( $floors as $floor ){
    echo "<tr><td><table border='1' width='100%'><tr>";
    $percent = ceil( 100 / count($floor) );
    foreach($floor as $app){
        print("<td width='{$percent}%'>{$app}</td>");
    }
    echo "</tr></table></td></tr>";
}
echo "</table>";
?>
Comments