Skip to content

Instantly share code, notes, and snippets.

/exemplo.html Secret

Created February 16, 2018 23:26
Show Gist options
  • Save anonymous/02df216a8409cabc0e1cd9529d770cf4 to your computer and use it in GitHub Desktop.
Save anonymous/02df216a8409cabc0e1cd9529d770cf4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
exemplo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Header and Footer example</title>
<style type="text/css">
@page {
margin: 2cm;
}
body {
font-family: sans-serif;
margin: 0.5cm 0;
text-align: justify;
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
color: #aaa;
font-size: 0.9em;
}
#header {
top: 0;
border-bottom: 0.1pt solid #aaa;
}
#footer {
bottom: 0;
border-top: 0.1pt solid #aaa;
}
#header table,
#footer table {
width: 100%;
border-collapse: collapse;
border: none;
}
#header td,
#footer td {
padding: 0;
width: 50%;
}
.page-number {
text-align: center;
}
.page-number:before {
content: "Page " counter(page);
}
hr {
page-break-after: always;
border: 0;
}
</style>
</head>
<body>
<div id="header">
<table>
<tr>
<td>Example document</td>
<td style="text-align: right;">Author</td>
</tr>
</table>
</div>
<div id="footer">
<div class="page-number"></div>
</div>
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<hr/>
<h2>Section 2</h2>
<p>
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna.</p>
<hr/>
<h2>Section 3</h2>
<!-- yeah, we'll have to do better for inline floating elements -->
<p><span style="float: left; font-size: 4em; width: 0.7em; height: 0.9em; line-height: 1;">A</span>liquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
</body></html>
Raw
exemplo2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Header and Footer example</title>
<style type="text/css">
@page {
margin: 2cm;
}
body {
font-family: sans-serif;
margin: 0.5cm 0;
text-align: justify;
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
color: #aaa;
font-size: 0.9em;
}
#header {
top: 0;
border-bottom: 0.1pt solid #aaa;
}
#footer {
bottom: 0;
border-top: 0.1pt solid #aaa;
}
#header table,
#footer table {
width: 100%;
border-collapse: collapse;
border: none;
}
#header td,
#footer td {
padding: 0;
width: 50%;
}
.page-number {
text-align: center;
}
.page-number:before {
content: "Page " counter(page);
}
hr {
page-break-after: always;
border: 0;
}
</style>
</head>
<body>
<div id="header">
<table>
<tr>
<td>Example document</td>
<td style="text-align: right;">Author</td>
</tr>
</table>
</div>
<div id="footer">
<div class="page-number"></div>
</div>
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<hr/>
<h2>Section 2</h2>
<p>
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna.</p>
<hr/>
<h2>Section 3</h2>
<!-- yeah, we'll have to do better for inline floating elements -->
<p><span style="float: left; font-size: 4em; width: 0.7em; height: 0.9em; line-height: 1;">A</span>liquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
</body></html>
Raw
exemplo3.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body {
margin: 18pt 18pt 24pt 18pt;
}
* {
font-family: georgia,serif;
font-weight: bold;
}
p {
text-align: justify;
font-size: 1em;
margin: 0.5em;
padding: 10px;
}
</style>
</head>
<body>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("verdana");;
$size = 6;
$color = array(0,0,0);
$text_height = Font_Metrics::get_font_height($font, $size);
$foot = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
// Draw a line along the bottom
$y = $h - $text_height - 24;
$pdf->line(16, $y, $w - 16, $y, $color, 0.5);
$pdf->close_object();
$pdf->add_object($foot, "all");
$text = "Page {PAGE_NUM} of {PAGE_COUNT}";
// Center the text
$width = Font_Metrics::get_text_width("Page 1 of 2", $font, $size);
$pdf->page_text($w / 2 - $width / 2, $y, $text, $font, $size, $color);
}
</script>
<h1>Lorem ipsum dolor sit amet</h1>
<h2><a name="anchor1">Anchor 1</a></h2>
<p><a href="#anchor3">link to anchor3</a></p>
<p><a href="http://dompdf.github.com/">dompdf.github.com</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</p>
<p>Etiam a mauris. Proin justo elit, accumsan sit amet, tempus et,
blandit id, tellus. Morbi varius, nisi id iaculis aliquam, lacus
ligula facilisis velit, ac pharetra ipsum augue a massa. Etiam rhoncus
commodo orci. Mauris ullamcorper sagittis turpis. Nullam magna libero,
sagittis sed, auctor faucibus, accumsan vitae, urna. Pellentesque
volutpat. Aliquam sapien ipsum, eleifend nec, imperdiet vitae,
consectetuer id, quam. Donec a urna. Suspendisse sit amet
velit. Curabitur quis nisi id dui viverra ornare. Sed condimentum enim
quis tortor. Ut condimentum, magna non tempus tincidunt, leo nibh
molestie tellus, vitae convallis dolor ante sed ante. Nunc et
metus. Phasellus ultricies. Fusce faucibus tortor sit amet mauris.</p>
<p>Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</p>
<p>Cras fringilla, nulla id egestas elementum, augue nunc iaculis nibh,
ac adipiscing nibh justo id tortor. Donec vel orci a nisi ultricies
aliquet. Nunc urna quam, adipiscing molestie, vehicula non,
condimentum non, magna. Integer magna. Donec quam metus, pulvinar id,
suscipit eget, euismod ac, orci. Nulla facilisi. Nullam nec
mauris. Morbi in mi. Etiam urna lectus, pulvinar ac, sollicitudin eu,
euismod ac, lectus. Fusce elit. Sed ultricies odio ac felis.</p>
<h1>Cras iaculis. Nulla facilisi.</h1>
<h2><a name="anchor2">Anchor 2</a></h2>
<p><a href="#anchor1">link to anchor1</a></p>
<p>Cras iaculis. Nulla facilisi. Fusce vitae arcu. Integer lectus mauris,
ornare vel, accumsan eget, scelerisque vel, nunc. Maecenas justo urna,
volutpat vel, vehicula vel, ullamcorper nec, odio. Suspendisse laoreet
nisi sed erat. Cras convallis sollicitudin sapien. Phasellus ac erat
eu mi rutrum rhoncus. Morbi et velit. Morbi odio nisi, pharetra eget,
sollicitudin sed, aliquam at, nisl. Quisque euismod diam in
sapien. Integer accumsan urna in risus.</p>
<p>Proin sit amet nisl. Phasellus dui ipsum, laoreet a, pulvinar id,
fringilla ut, libero. In hac habitasse platea dictumst. Maecenas mi
magna, cursus sed, rutrum eget, molestie nec, dui. Suspendisse
lacus. Vivamus nibh urna, accumsan sit amet, gravida sed, convallis a,
leo. Cras sollicitudin orci sit amet eros. Pellentesque eu odio et
velit tempor dignissim. Morbi vehicula malesuada enim. Pellentesque
tincidunt, tellus ac fringilla tempor, justo libero interdum nunc, eu
sollicitudin tortor augue nec tellus. Nullam eget leo quis tellus
gravida faucibus. Nam gravida. Curabitur rhoncus egestas
nunc. Curabitur mollis, nisi sed suscipit gravida, enim felis interdum
justo, vel accumsan magna nunc ut libero. Ut fermentum. Fusce luctus,
est sit amet feugiat lobortis, nisl eros bibendum libero, ut suscipit
felis ligula in massa. Proin congue elit et nisi. Cras ac nisl. Nunc
ullamcorper neque vel diam.</p>
<h1>Ut pellentesque arcu ac lectus.</h1>
<p>Sed ac lorem. Ut pellentesque arcu ac lectus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Pellentesque ultrices metus sollicitudin pede. Donec fermentum
est a velit fringilla mollis. Duis ligula. Fusce viverra laoreet
odio. Suspendisse sit amet ligula. Maecenas nunc velit, sagittis eu,
bibendum eu, placerat at, nibh. Praesent ut erat eget nisi gravida
imperdiet. Quisque vitae sapien. Ut eros.</p>
<p>Donec eros ligula, dignissim vel, ultricies id, mattis in, massa. Duis
lobortis dui nec orci. Sed ullamcorper metus non massa. Aliquam eget
mauris ac nulla elementum posuere. Sed porta, augue vitae rhoncus
aliquet, felis quam eleifend est, vitae rutrum metus arcu vel
lorem. Proin laoreet, mauris sit amet aliquet eleifend, nisl sem
molestie nisi, eu varius eros ligula non erat. Integer ac
sem. Suspendisse lectus. Aliquam erat volutpat. Fusce sit amet leo
faucibus erat molestie ultrices. Maecenas lacinia lectus eget
dui. Etiam porta porttitor ante. Phasellus sit amet lacus adipiscing
enim mollis iaculis. Fusce congue, nulla a commodo aliquam, erat dui
fermentum dui, pellentesque faucibus orci enim at mauris. Pellentesque
a diam porta magna tempor posuere. Donec lorem.</p>
<p>Sed viverra aliquam turpis. Aliquam lacus. Duis id massa. Nullam
ante. Suspendisse condimentum. Donec adipiscing, felis vel semper
sollicitudin, lacus justo pretium est, sed blandit pede risus eu
ante. Praesent ante nulla, fringilla id, ultrices et, feugiat a,
metus. Proin ac velit a metus suscipit fermentum. Integer aliquet. Sed
sapien nulla, placerat at, rutrum at, condimentum quis, libero. In
accumsan, tellus nec tincidunt malesuada, pede arcu commodo ipsum, ac
mattis tortor urna vitae enim. Aenean nonummy, mauris eget commodo
bibendum, augue sem ultrices nunc, eget rhoncus metus erat placerat
lectus. Aliquam mollis lectus in justo. Vivamus iaculis lacus sit amet
ligula. Etiam consectetuer convallis diam. Curabitur sollicitudin,
felis eu vehicula scelerisque, nisl urna aliquam orci, sit amet
laoreet mi turpis id ligula. Donec at enim non nulla adipiscing
dapibus. Aenean nisl.</p>
<p>Ut in lacus nec enim volutpat pellentesque. Integer euismod. In odio
eros, malesuada in, mattis vel, tempor nec, sem. In libero tellus,
varius vitae, bibendum in, elementum quis, nisl. Duis tortor. Etiam at
justo. Pellentesque facilisis mauris non nunc. Praesent eros mi,
dapibus eget, placerat ac, lobortis quis, sem. Nulla rhoncus
turpis. Nulla vitae mi. Proin id massa. Nunc eros.</p>
<h1>Aliquam molestie pulvinar ligula.</h1>
<h2><a name="anchor3">Anchor 3</a></h2>
<p><a href="#anchor2">link to anchor2</a></p>
<p>Vestibulum dui risus, varius ut, semper et, consequat ultrices,
felis. Pellentesque iaculis urna in velit. Ut pharetra. Nunc
fringilla, nisi vitae fringilla placerat, enim justo semper erat,
mollis feugiat leo neque eu sem. Vestibulum orci urna, suscipit a,
accumsan nec, fringilla in, risus. Nullam ante. Nullam nec
eros. Nullam varius. Nulla facilisi. In auctor libero in
metus. Aliquam porttitor congue eros. Nulla facilisi. Mauris euismod
turpis ut felis. Ut nunc nisl, cursus quis, eleifend at, viverra
bibendum, lacus. Donec consequat lacus eu sapien. Fusce pulvinar
lectus quis nunc. In hac habitasse platea dictumst.</p>
<p>Aliquam molestie pulvinar ligula. Maecenas imperdiet, urna eget
ultrices adipiscing, nibh ante elementum neque, id molestie massa quam
ut nunc. Nullam porta. Phasellus a magna in sem volutpat
viverra. Quisque aliquet nunc ac turpis. Mauris dolor enim, viverra
rutrum, placerat et, laoreet et, justo. In id nulla. Donec
erat. Phasellus nec mi sed velit mollis cursus. Vestibulum
tincidunt. Praesent dui libero, facilisis eu, vulputate eget, aliquet
nec, ipsum. Pellentesque in nisl in mauris pretium euismod.</p>
</body> </html>
Raw
exemplo4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body { font-family: verdana, sans-serif;}
table {
margin-bottom: 2em;
}
thead {
background-color: #eeeeee;
}
tbody {
background-color: #ffffee;
}
th,td {
padding: 3pt;
}
table.separate {
border-collapse: separate;
border-spacing: 5pt;
border: 3pt solid #33d;
}
table.separate td {
border: 2pt solid #33d;
}
table.collapse {
border-collapse: collapse;
border: 1pt solid black;
}
table.collapse td {
border: 1pt solid black;
}
</style>
</head>
<body>
border-collapse: separate
<table class="separate">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tr>
<td rowspan="2">cell 1</td>
<td>cell 2</td>
<td colspan="2">cell 3</td>
</tr>
<tr>
<td style="border: 4px double black" colspan="2">cell 4</td>
<td rowspan="2">cell 5</td>
</tr>
<tr>
<td colspan="3">cell 6</td>
</tr>
<tr>
<td colspan="4">cell 7</td>
</tr>
</table>
border-collapse: collapse
<table class="collapse">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td colspan="2">cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<td>cell 8</td>
<td>cell 9</td>
<td colspan="2">cell 10</td>
</tr>
</tbody>
<tr>
<td colspan="4">cell 11</td>
</tr>
</table>
</body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment