/    Sign up×
Community /Pin to ProfileBookmark

How to make my tables look like this…

[url]http://tinypic.com/f9ehkn.jpg[/url]

Note that i made this in photoshop, I know how to get the outside border, but what about just getting the lines across the middle? Our client wants it to look exactly like pictures.

Also each section that is divided up is its own seperate table.

to post a comment
HTML

1 Comments(s)

Copy linkTweet thisAlerts:
@NogDogNov 01.2005 — Here's something to get you started, using CSS and DIVs for the main boxes:
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 80% verdana, helvetica, sans-serif;
color: #07c;
}
div {
border: solid 1px #07c;
}
#container {
margin: 10px auto;
padding: 0;
width: 600px;
}
.box {
margin: 0;
padding: 10px;
}
h1, h2, h3 {
font-weight: normal;
margin: 5px 0;
}
h1 {
font-size: 140%;
}
h2 {
font-size: 100%;
}
h3 {
font-size: 120%;
text-decoration: underline;
}
table {
border-collapse: collapse;
border: none;
margin: 5px;
}
th,td {
padding: 3px 10px;
border: none;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="box">
<h1>MAIN TITLE</h1>
<h2>SUBTITLE (goes here)</h2>
</div>
<div class="box">
<h3>UNDERLINED HEADING</h3>
<table>
<tr><td>Loan No.:</td><td>12345678</td></tr>
<tr><td>Company ID:</td><td>20</td></tr>
</table>
</div>
</body>
</html>
[/code]
×

Success!

Help @noslenwerd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...