1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6* {
7 box-sizing: border-box;
8}
9
10/* Create three equal columns that floats next to each other */
11.column {
12 float: left;
13 width: 33.33%;
14 padding: 10px;
15 height: 300px; /* Should be removed. Only for demonstration */
16}
17
18/* Clear floats after the columns */
19.row:after {
20 content: "";
21 display: table;
22 clear: both;
23}
24</style>
25</head>
26<body>
27
28<h2>Three Equal Columns</h2>
29
30<div class="row">
31 <div class="column" style="background-color:#aaa;">
32 <h2>Column 1</h2>
33 <p>Some text..</p>
34 </div>
35 <div class="column" style="background-color:#bbb;">
36 <h2>Column 2</h2>
37 <p>Some text..</p>
38 </div>
39 <div class="column" style="background-color:#ccc;">
40 <h2>Column 3</h2>
41 <p>Some text..</p>
42 </div>
43</div>
44<br>
45<div class="row">
46 <div class="column" style="background-color:#aaa;">
47 <h2>Column 1</h2>
48 <p>Some text..</p>
49 </div>
50 <div class="column" style="background-color:#bbb;">
51 <h2>Column 2</h2>
52 <p>Some text..</p>
53 </div>
54 <div class="column" style="background-color:#ccc;">
55 <h2>Column 3</h2>
56 <p>Some text..</p>
57 </div>
58</div>
59</body>
60</html>
1<!--
2tr = row
3td = cell
4-->
5
6<table>
7 <tr>
8 <td>1,1</td>
9 <td>1,2</td>
10 <td>1,3</td>
11 </tr>
12 <tr>
13 <td>2,1</td>
14 <td>2,2</td>
15 <td>2,3</td>
16 </tr>
17 <tr>
18 <td>3,1</td>
19 <td>3,2</td>
20 <td>3,3</td>
21 </tr>
22
23</table>