Hey John,
This is the HTML Template that I am trying to populate.
Thank you for all your help.
Kind Regards
Jefferson
<!DOCTYPE html>
<html lang="eng">
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flexbox;
flex-wrap: wrap;
font-size: 9px;
}
.header {
background-color: olive;
flex: 0 0 100%;
color: whitesmoke;
justify-content: center;
height: 50px;
text-align: center;
vertical-align: middle;
padding-top: 30px;
margin: 0px;
font-size: 1.5rem;
}
.strapline {
background-color: whitesmoke;
color: black;
flex: 0 0 100%;
justify-content: center;
vertical-align: center;
height: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
margin: 5px;
font-size: 0.9rem;
}
.dtab {
margin: 30px 0 50px 0;
}
.trow {
flex: 0 1 500px;
flex-wrap: nowrap;
}
.dtab .trow:nth-child(1) {
background-color: rgb(175, 171, 131);
color: whitesmoke;
height: 30px;
border: 0px;
}
.dtab .trow:nth-child(even) {
background-color: rgb(226, 226, 220);
}
#toprow span {
border: 0px;
}
span {
display: inline-block;
vertical-align: top;
padding: 3px;
font-size: 0.8rem;
}
.tcol1 {
width: 50%;
text-align: left;
font-weight: 500;
border-right: 2px solid white;
}
.tcol2 {
width: 20%;
text-align: left;
font-weight: 300;
border-right: 2px solid white;
}
.tcol3 {
width: 20%;
text-align: left;
font-weight: 300;
}
</style>
</head>
<body>
<div class="header">Volcano Survey</div>
<div class="strapline">A Survey about Volcanoes</div>
<div class="dtab">
<div id="toprow" class="trow">
<span class="tcol1">Choice</span>
<span class="tcol2">Completed By</span>
<span class="tcol3">Comments</span>
</div>
<div class="trow">
<span class="tcol1">[SELECTION]</span>
<span class="tcol2">[NAME]</span>
<span class="tcol3">[COMMENT]</span>
</div>
</div>
</body>
