Skip to content

Commit

Permalink
Add table examples
Browse files Browse the repository at this point in the history
  • Loading branch information
OndrejSpanel committed Apr 27, 2023
1 parent f5cb224 commit 186174e
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Z-index,demo:demos/zindex.xhtml
Cursors,demo:demos/cursors.xhtml
Report,demo:demos/report.xhtml
Forms,demo:demos/forms.xhtml
Legacy Tables,demo:demos/fullscreen-table.xhtml
CSS Tables,demo:demos/fullscreen-css-table.xhtml
Recipe in XML,demo:demos/cream-chicken-rice.xml
Centered Fluid,demo:demos/centered-fluid.xhtml
Centered Fluid Auto Margin,demo:demos/centered-fluid-automargin.xhtml
Expand All @@ -18,4 +20,4 @@ Threecol Fluid,demo:demos/3col-fluid.xhtml
Alice in Wonderland,demo:demos/alice/alice.xhtml
Hamlet,demo:demos/hamlet.xhtml
Game Screen,demo:demos/game/game-screen.xhtml
Unsupported,demo:demos/unsupported.xhtml
Unsupported,demo:demos/unsupported.xhtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Layout using CSS Table</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.header {
background-color: lightblue;
}
.main {
background-color: lightgreen;
}
.footer {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row header">
<div class="cell">Header</div>
</div>
<div class="row main">
<div class="cell">Main content area</div>
</div>
<div class="row footer">
<div class="cell">Footer</div>
</div>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Layout using Table</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.header {
background-color: lightblue;
}
.main {
background-color: lightgreen;
}
.footer {
background-color: lightcoral;
}
</style>
</head>
<body>
<table border="true">
<tbody>
<tr><td class="header">Header</td></tr>
<tr><td class="main">Main content area</td></tr>
<tr><td class="footer">Footer</td></tr>
</tbody>
</table>
</body>
</html>

0 comments on commit 186174e

Please sign in to comment.