Tables

Modern web browsers are designed for handling content in the first instance and formatting should be secondary, therefore we use tags and id's to control content through a Cascading Style Sheet (CSS) which can be attached to a document and loaded independently of the webpage content.

Use the code below to practice using div's and a style sheet.

Left Heading

Left content

Middle Heading

Put something in here to organise the content

The code below helps you format the content in the form of a table without using the html table tag.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<body>
	<div id="container">
  		<div id="row">
  			<div id="left">
  			<h4>Left Heading</h4>
  			<p>Left content</p>
  		</div>
  		<div id="middle">
  			<h4>Middle Heading</h4>
  			<p>Put something in here to organise the content</p>
  		</div>
  		<div id="right">
    		<h4>Right Heading</h4>
    		<p>Put something in here to test the column property</p>
  		</div>
	</div>
</body>
</html>

To make this code work you will need to add the code below in a CSS style sheet. Create a new text document and save it in the same folder as your webpage as "mystyle.css"


#container {
    display: table;
}

#row  {
    display: table-row;
    border: 1px solid;
}

#left, #right, #middle {
    display: table-cell;
    border: 1px solid;
}