Exercise : Results Table

Take your query from one of the previous problems and put it into a PHP page that displays the results using a table. (See next slides.)

Recall: Querying a Database in PHP with PDO

$name = new PDO("dbprogram:dbname=database;host=server", username, password);
$name->query("SQL query");

# connect to world database on local server
$db = new PDO("mysql:dbname=world;host=localhost", "traveler", "packmybags");
$db->query("SELECT * FROM countries WHERE population > 100000000;");

• PDO database library allows you to connect to many different database programs
• PDO object's query function returns rows that match a query

Recall: Result rows with query

$db = new PDO("dbprogram:dbname=database;host=server", username, password);
$rows = $db->query("SQL query");
foreach ($rows as $row) {
	do something with $row;
}

• query returns all result rows
  • each row is an associative array of [column name -> value]
  • example: $row["population"] gives the value of the population column

HTML tables: <table>, <tr>, <td>

A 2D table of rows and columns of data (block element)

<table>
	<tr><th>Col 1</th><th>Col 2</th></tr>
	<tr><td>r1c1</td><td>r1c2 hello :-)</td></tr>
	<tr><td>r2c1 is very wide!</td><td>r2c2</td></tr>
</table>

• table defines the overall table
• tr is each row, th each header label, and td each cell's data

Styling tables

table { border: 4px dotted blue; text-align: right; }
td    { border: 3px dashed red; width: 30%; padding: 10pt; }

• all standard CSS styles can be applied to a table, row, or cell
• table specific CSS properties:
  • border-collapse, border-spacing, caption-side, empty-cells, table-layout