First, I want to say that I do not recommend copying this exactly and using it for your homework. You should read the comments and attempt to understand why it does what it does. I've done my best to comment the code so you can learn it.
Newbie Friendly
//define default `$numrows` in function declaration
function makeTable($headerarray, $numrows = 5) {
//create table beginning
echo "<table>";
//create first row, which is your header
//this needs to be done OUTSIDE of the header loop, as there is only 1 set of headers.
echo "<tr>";
//loop through headers using FOREACH
foreach($headerarray as $header) {
//add <th> element for each header
echo "<th>" . $header . "</th>";
}
//end table row (header)
echo "</tr>";
//define ODD class. The first loop is ALWAYS ODD.
$class = 'light';
//get a count of columns
$numcolumns = count($headerarray);
//loop a specific number of times (number of rows), using a FOR loop
for ($row = 1; $row <= $numrows; $row++) {
//create table row inside FIRST FOR LOOP. This creates a row each time.
//also add `$class` to row.
echo "<tr class=\"" . $class . "\">";
//loop a specific number of times (number of columns). This creates a column each time.
for ($column = 1; $column <= $numcolumns; $column++) {
//create a <td> element (cell)
echo "<td>";
if($column == 1) { //if column is 1
//use row number as cell content
echo "Row " . $row;
} else { //if column IS NOT 1
//use column number as content
echo "Column " . $column; #show column number as content
}
//end <td> element (cell)
echo "</td>"; #end row
}
//end table row
echo "</tr>";
//AT THE END OF ROW LOOP, switch `$class` to 'dark' if it is currently 'light'
//or switch it to 'light' if it is currently 'dark'
//since this is at the end of the row loop, it takes effect on the next loop. That means it should alternate between the 2
/***
This solution has several benefits. First, you don't need to know if the current row is even or odd.
second, you could use this to check if the row is even/odd IF YOU NEED TO
(if `$class` is 'light', you know the row is ODD)
**/
if($class == 'light') {
$class = 'dark';
} else {
$class = 'light';
}
}
//end table
echo "</table>";
}
Which results in this HTML using your example data.
<table>
<tr>
<th>Book Title</th>
<th>Book Author</th>
<th>Publication Date</th>
<th>Book Pages</th>
<th>Finished Book</th>
</tr>
<tr class="light"><td>Row 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr class="dark"><td>Row 2</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr class="light"><td>Row 3</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr class="dark"><td>Row 4</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr class="light"><td>Row 5</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
</table>
The CSS part is pretty simple, you just need to define a dark
and light
rule.
tr.light {
background-color: LIGHT_COLOR;
}
tr.dark {
background-color: DARK_COLOR;
}
A more advanced approach
If I had to do this, I'd probably do something like this:
function makeTable($headerarray, $numrows = 5) {
$headers = "";
foreach($headerarray as $head) {
$headers .= "<th>{$head}</th>";
}
$body = "";
$numcolumns = count($headerarray);
for ($row = 1; $row <= $numrows; $row++) {
$tmp = "<tr>";
for ($col = 1; $col <= $numcolumns; $col++) {
$content = $col == 1 ? "Row {$row}" : "Column {$col}";
$tmp .= "<td>{$content}</td>";
}
$body .= $tmp . "</tr>";
}
$html = "
<table>
<thead>
<tr>
{$headers}
</tr>
</thead>
<tbody>
{$body}
</tbody>
</table>
";
return $html;
}
This function returns the table instead of directly echoing it. This allows you to do more stuff with the HTML at the very end if you need to. You would use this function like this:
$headers = array(
"Book Title",
"Book Author",
"Publication Date",
"Book Pages",
"Finished Book"
);
echo makeTable($headers, 5);
I also completely removed the classes from the rows, because it's easier to do with CSS alone, which will react better to rows being removed by javascript or whatever. It can be applied like this:
tbody > tr:nth-child(even) {
background-color: DARK_COLOR;
}
tbody > tr:nth-child(odd) {
background-color: LIGHT_COLOR;
}