Designing Public Records Tables + Layout

Hello Sitepoint, :smiley:

I thought this might be a good point at which to open my discussion on SitePoint as I trudge through designing my Public Records page. I have started to code it, but I have already encountered a few roadblocks.

The intention of this page is to host my YouTube viewers’ legal documents which will be listed in the table as new rows in the table. On each row, there will be a link to “view documents” which will then take the visitor to a bin (without design or styles) where they can view the PDF files tied to that entry (this will be an entirely different step as I do not know how to link to a file bin). I have about 7 PDF files for me that can be listed under my first entry. It would even be a bonus if the web host leaves a time stamp on when I upload documents to the server.

I have already laid the foundation of all the elements that I want in this page (header, text statement, table, link back to the home page, copyright tag), but here are the issues that I’m already encountering: :fearful:

  1. On the content container div (.content), I want to make a nice box with only 4 end dots. I basically copy / pasted the styles from homepage.css into publicrecords.css, starting at line 35. All the graphic elements already exist in my style folder, but putting them together to make a nice box is a daunting task. Currently, the top side has no horizontal enclosure, and the bottom side is a repeating, incongruous mess. :pensive:

  2. The table: the table has no bottom border like I coded in publicrecords.css (line 69).
    My goals for the table are:
    -larger font for the top row (done :thumbsup:)
    -solid bottom border to the top row
    -third column for view documents to have a slimmer width
    -thin borders between each row / entry
    -table with the capacity to be shrunk down to narrow viewport sizes without encroaching on the outermost design box (almost done, but the width protrudes a bit too much at slim viewport widths)

  3. I have not been able to determine why the link going back to the home page will not center despite a few different ways of targeting it (see line 83, publicrecords.css). :persevere:

  4. The copyright statement has too much padding under it. There’s a bit too much space at the bottom of the .content div. :disappointed:

Anyway, I will continue to work on this independently, but SitePoint has been a most valuable community for me as I / we have been progressing through building this site. As you read this, I am trying different strategies and always updating the files. :relaxed:

Let me know if you are unable to view the HTML / CSS source, and I will post the code here as necessary.

Have a Merry Christmas :evergreen_tree:,

Ty

Edit: This page is similar in intent to what Paul Duhy does on his site at nationalpublicrecordregistry.info on the “Search” link at the top. That is a very ugly page. I know. Mine will be a lot better.

Hi, Ty.

My plate is a bit full right now, but I should be able to give your table a first look some time tomorrow if someone else doesn’t beat me to it.

Merry Christmas to you, too.

Ronpat,

Yep, I’m back at it. My website is starting to spread its wings :hibiscus:, and I may be taking on a partner to help me create some more content on the landing pages we created, filling in the blank pages. I have a YouTube channel that has 40,000 views, and people will be using my services on this page like wildfire as soon as I have it done. At least, this Public Records page is the first page, and then I have to figure out how to link to each person’s documents without too much effort. Maybe you or someone else has some baseline ideas on what to for several files for each name after the user clicks the “view documents” link. Again, that’s a topic for another discussion, and the first priority is making this page and table look acceptable (I’ll be working on it on my own as I wait for any assistance I may receive.). If it’s possible to link to a “cgi-bin” directory / file tree without any CSS, that’s perfectly acceptable. :cat:

Take your time. I’m confident that our discussions are helping other viewers as this website has, over time, helped a few people learn how to design their pages. :four_leaf_clover: …and it’s Christmas for God’s sake… :deciduous_tree:

-ty

I replaced hline.gif with a new hline.png by rotating .vline.png 90 deg. So instead of using hline.gif, use the attached hline.png. No horizontal dots.

I made a few changes to the CSS including adding notes.

It might be helpful if you can create a pseudo-screenshot showing how you anticipate the finished page looking. If the finished look is still experimental, that’s OK, too.

There are several ways to center the anchor. I just picked one. Eventually, the context may suggest a different method would be more suitable.

There is no need to tell a <tr> tag that it is a table-row. Redundant.
 
publicrecords1a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="product review site, review site, content review site">
    <link rel="stylesheet" href="style/publicrecords1a.css">
    <title>Public Records Section &ndash; World Review Group</title>
<!--
https://www.sitepoint.com/community/t/designing-public-records-tables-layout/248031
etidd
Dec 23,2016 7:29 PM
-->
</head>
<body>

<div class="outer"> <!-- .outer -->
    <div class="bodybox"> <!-- .bodybox -->
        <div class="content"> <!-- .content -->
            <h1>Public Records Section</h1>
            <p>The Public Record is the highest form of evidence.<br> Here, you can find various legal documents posted and filed for public viewing.</p>
            <div class="tablewrap">
                <table class="documents">
                    <tr class="toprow trow">
                        <td>Name</td>
                        <td>State of Domicile</td>
                        <td class="col3">View Documents</td>
                    </tr>
                    <tr class="entry trow">
                        <td>Henry&ndash;Tyler: Smith</td>
                        <td>Georgia</td>
                        <td class="col3"><a href="#">Click Here</a></td>
                    </tr>
                    <tr class="entry trow">
                        <td>John&ndash;Quincy: Doe</td>
                        <td>California</td>
                        <td class="col3"><a href="#">Click Here</a></td>
                    </tr>
                    <tr class="entry trow">
                        <td>First&ndash;Middle: Last</td>
                        <td>New Jersey</td>
                        <td class="col3"><a href="#">Click Here</a></td>
                    </tr>
                    <tr class="entry trow">
                        <td>Little&ndash;Jane: Patriot</td>
                        <td>Missouri</td>
                        <td class="col3"><a href="#">Click Here</a></td>
                    </tr>
                </table>
            </div> <!-- .tablewrap -->

            <a href="index.html">Back to the Home Page</a>

            <h4>&copy;World Review Group, 2017</h4>

        </div> <!-- .content -->
    </div> <!-- .bodybox -->
</div> <!-- .outer -->

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</body>
</html>

 
publicrecords1a.css

/***********************/
/*  publicrecords.css  */
/*  2016.12.18 02:10   */
/***********************/
/* PRESETS */
*, *:before, *:after {
    box-sizing:border-box;
}
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.trow {
    display:table-row;
}
.tcell {
    display:table-cell;
    padding:0;
}
/* end PRESETS */

/* ************ page structure ************ */
body {
    background:url("bgrecords.gif") repeat 50% 0;
}
.outer {
    max-width:1200px;
    margin:0 auto;
}

.content {
    background-image:url("enddot.png"),url("enddot.png"),url("enddot.png"),url("enddot.png"),url("hline.png"),url("hline.png"),url("vline.png"),url("vline.png"),url("bglight.jpg");
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y,repeat;
    background-position:0 0,0 100%,100% 0,100% 100%,50% 0,50% 100%,0 50%,100% 50%;
    overflow:hidden;
    position:relative;
    z-index:1;
    font-family:"Times New Roman",Times,sans-serif;
    padding:8px 8px 8px;
}

/*** header ***/
h1 {
    text-align:center;
    font-size:36pt;
}

/*** table layout ***/
.tablewrap {  /* div */
    display:table;
    width:80%;
    /*min-width:40%;*/  /* No it is not.  Tables treat width as min-width anyway. */
    border:3px solid #eb4cc2;
    padding:0 15px 15px;
    margin:0 auto;
}
.documents {  /* table */
    width:95%;
    border:2px solid #000;
    text-align:center;
    margin:0 auto;
}
tr.toprow {
    font-size:18pt;
/*  border-bottom:2px solid #ccc;  /* <tr> accepts very few properties; <tr> does not accept border. */
}
.documents td.col3 {
    width:20%;
    border-left:2px dotted #6f3;
}
/* END TABLE */

/* general styles */
p {
    font-size:18pt;
    text-align:center;
}
a {
    display:table;
    margin:0 auto;
}
a:hover, a:focus {
    text-decoration:none;
    color:#4d4dff;
}
a:visited {
    color:#603;
}
h4 {
    text-align:center;
    margin:.5em 0;
}
/* END */


2 Likes

Hi there etidd,

I have worked on some of your problems. :sunglasses:

Check out the attachment…

public-records.zip (14.2 KB)

…and let me know what I have missed out . :wonky:

coothead

2 Likes

Hi, coothead and Ronpat,

I very much appreciate both of your recommendations and especially the time you took out, coothead, to work out some of the kinks. I have been studying and integrating your code structure into my existing files. They are now updated on the page. :racehorse: I saw your comments, Ronpat, in the file that says that tr elements accept very few properties, min-width not being one of them.

A problem that still remains on the page but not in your example is that the table still protrudes from the enclosing box at narrow viewport widths despite the lone media queries at the end of the CSS stylesheet. I am trying to determine why this is still the case in the current code structure. Does the enclosing .tablewrap div have an adverse and unintended effect? :confused:

A couple of things that stand out to me as new concepts:

border-image:url("publicrecordsborder.png")8;

-Why is there an 8 at the end of this line?? It is there for a purpose as the border image does not display without it.

-Display:block; is applied to all anchor (a>) elements at line 95. Is that to prevent other elements from occupying the same line?

-If .trow is redundant for this table layout, can the styles at line 17 be removed altogether? The .trow class for each table row were incorporated for styling the tables on my landing pages, but maybe setting the display attribute to table-cell was necessary for getting around a conflicting attribute for that particular page’s design structure. Ronpat may know more about this since he was an architect of the landing pages I was designing about 2 years ago.

==
Current markup & styles:
publicrecords.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/publicrecords.css">
	<meta name="keywords" content="product review site, review site, content review site">
    <title>Public Records Section &ndash; World Review Group</title>
</head>
<body>

			<div class="content"><!-- .content -->
				<h1>Public Records Section</h1>
				<p>The Public Record is the highest form of evidence.<br>Here, you can find various legal documents posted and filed for public viewing.</p>
				<div class="tablewrap">
					<table class="documents">
						<tr>
							<th>Name</td>
							<th>State of Domicile</td>
							<th>View Documents</td>
						</tr>
						<tr>
							<td>Henry&ndash;Tyler: Smith</td>
							<td>Georgia</td>
							<td class="col3"><a href="#">Click Here</a></td>
						</tr>
                        <tr>
							<td>John&ndash;Quincy: Doe</td>
							<td>California</td>
							<td class="col3"><a href="#">Click Here</a></td>
						</tr>
                        <tr>
							<td>First&ndash;Middle: Last</td>
							<td>New Jersey</td>
							<td class="col3"><a href="#">Click Here</a></td>
						</tr>
                        <tr>
							<td>Little&ndash;Jane: Patriot</td>
							<td>Missouri</td>
							<td class="col3"><a href="#">Click Here</a></td>
						</tr>
					</table>
				</div> <!-- .tablewrap -->
				
				<a href="index.html" id="back">Back to the Home Page</a>
				
				<p id="copyright">&copy;World Review Group, 2017</p>
				
			</div> <!-- .content -->

	<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->
</body>
</html>

publicrecords.css

/***********************/
/*  publicrecords.css  */
/*  2016.12.25 15:06   */
/***********************/
/* PRESETS */
*, *:before, *:after {
    box-sizing:border-box;
}
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.trow {
    display:table-row;
}
.tcell {
    display:table-cell;
    padding:0;
}
/* end PRESETS */

/* ************ page structure ************ */
body {
    background:url("bgrecords.gif");
    background-attachment:fixed;
    font: 1em/1.62em "Times New Roman",Times,serif;
}

.content {
    width:85%;
    margin:auto;
    border:0.5em solid transparent;
    padding:1em;
    box-sizing:border-box;
    border-image:url("publicrecordsborder.png")8;
    background-image:url("bglight.jpg");
    background-clip:padding-box;
}

/*** header ***/
h1 {
    line-height: 1em;
    font-size: 3em;
    text-align: center;
}

/*** table layout ***/
.tablewrap {  /* div */
    display:table;
    width:80%;
    padding:0 15px 15px;
    margin:0 auto;
}
.documents {
    /*width: 75%;*/
    margin: 2em auto;
    border: 0.15em solid #000;
    border-collapse: collapse;
    text-align: center;
}

.documents th,
.documents td {
    padding: 0.25em;
}

.documents th {
    border-bottom: 0.06em solid #000;
    font-size: 1.5em;
    font-weight: normal;
}

.documents th:last-of-type {
    width: 22%;
}

.documents th:last-of-type,
.documents tr td:last-of-type {
    border-left: 0.06em dotted #000;
}
/* END TABLE */

/* general styles */
p {
    font-size:18pt;
    text-align:center;
}
a {
    display:table;
    margin:0 auto;
    display:block;
    width:12em;
    margin:1em auto;
    text-align:center;
}
a:hover, a:focus {
    text-decoration:none;
    color:#4d4dff;
}
a:visited {
    color:#603;
}
a:visited:hover, a:visited:focus{text-decoration:none;}

p#copyright {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
}

/*** media queries ***/
@media screen and (max-width: 30em) {
.content {
    width: 100%;
    padding: 0.25em;
}
.documents {
    width: 100%;
    font-size: 0.75em;
}
  }
/* END */
```

Thanks again for all your assistance. Can I bring you a figgy pudding? :cake:

-ty

This is because, in your infinite wisdom, you decided
to mess with the code that was provided. :wonky:

Here is your corrected publicrecords.html file…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="product review site, review site, content review site">
<title>Public Records Section &ndash; World Review Group</title>
<link rel="stylesheet" href="style/publicrecords.css">
</head>
<body>
<div class="content">
 <h1>Public Records Section</h1>
 <p>The Public Record is the highest form of evidence.<br>Here, you can find various legal documents posted and filed for public viewing.</p>
 <table class="documents">
  <tbody>
	<tr>
	 <th>Name</th>
	 <th>State of Domicile</th>
	 <th>View Documents</th>
	</tr><tr>
	 <td>Henry&ndash;Tyler: Smith</td>
	 <td>Georgia</td>
	 <td><a href="#">Click Here</a></td>
	</tr><tr>
	 <td>John&ndash;Quincy: Doe</td>
	 <td>California</td>
	 <td><a href="#">Click Here</a></td>
	</tr><tr>
	 <td>First&ndash;Middle: Last</td>
	 <td>New Jersey</td>
	 <td><a href="#">Click Here</a></td>
	</tr><tr>
	 <td>Little&ndash;Jane: Patriot</td>
	 <td>Missouri</td>
	 <td class="col3"><a href="#">Click Here</a></td>
	</tr>
 </tbody>
 </table>
 <a href="index.html" id="back">Back to the Home Page</a>
 <p id="copyright">&copy;World Review Group, 2017</p>
</div> 
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</body>
</html>

…and your corrected publicrecords.css file…

/***********************/
/*  publicrecords.css  */
/*  2016.12.25 15:06   */
/***********************/
/* PRESETS */
*, *:before, *:after {
    box-sizing:border-box;
 }
.cf:before,
.cf:after {
    content:"";
    display:table;
 }
.cf:after {
    clear:both;
 }
.trow {
    display:table-row;
 }
.tcell {
    display:table-cell;
    padding:0;
 }
/* end PRESETS */
/* ************ page structure ************ */
body {
    background:url(bgrecords.gif);
    background-attachment:fixed;
    font: 1em/1.62em 'Times New Roman',Times,serif;
 }
.content {
    width: 85%;
    margin: auto;
    border: 0.5em solid transparent;
    padding: 1em;
    box-sizing: border-box;
    border-image: url(publicrecordsborder.png)8;
    background-image: url(bglight.jpg);
    background-clip: padding-box;
 }
/*** header ***/
h1 {
    line-height: 1em;
    font-size: 3em;
    text-align: center;
 }
/*** table layout ***/
.documents {
    width: 80%;
    margin: 2em auto;
    border: 0.15em solid #000;
    border-collapse: collapse;
    text-align: center;
 }
.documents th,
.documents td {
    padding: 0.25em;
 }
.documents th {
    border-bottom: 0.06em solid #000;
    font-size: 1.5em;
    font-weight: normal;
 }
.documents th:last-of-type {
    width: 22%;
 }
.documents th:last-of-type,
.documents tr td:last-of-type {
    border-left: 0.06em dotted #000;
 }
.documents a {
    width: auto;
 }
/* END TABLE */
/* general styles */
p {
    font-size: 18pt;
    text-align: center;
 }
a {
    margin: 0 auto;
    display: block;
    width: 12em;
    margin: 1em auto;
    text-align: center;
 }
a:hover, a:focus {
    text-decoration:none;
    color: #4d4dff;
 }
a:visited {
    color: #603;
 }
a:visited:hover, a:visited:focus {
    text-decoration: none;
 }
.content #copyright {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
 }
/*** media queries ***/
@media screen and (max-width: 30em) {
.content {
    width: 100%;
    padding: 0.25em;
  }
.documents {
    width: 100%;
    font-size: 0.75em;
  }
 }
/* END */

coothead

This is because, in your infinite wisdom, you decided
to mess with the code that was provided. :wonky:

Just trying to implement and learn things as I move through this rather than if I copy and pasted directly. :blush:

Anyway, it looks great now, but that table is definitely still protruding at smallest widths, so I added a min-width of 300px to the .content div just after line #31, publicrecords.css. Is that okay? I think that solved the issue.

Updated Files

-ty

Do you still have a width of 12em on the anchor? Try deleting that width along with the min-width that you just added.

EDIT:

Never mind. I see from your new code that that it looks good to me. Perhaps post an actual rez screen shot without the min-width that you added that shows the overflowing table end. What is the width of the device you are trying to fit?

Done. Anchor width of 12em removed.

I may also need to eventually add a search or page number function, but this table will suffice for several months.

For now, I need to start thinking about where these page links will lead. I think it would be just fine if they linked to an individual file bin if that’s possible. I’m setting up a new folder on the web host called “TylerSmith” that will contain a series of PDF files, and then can I just link to the folder to display a file bin of the present uploaded files in each folder for different people?

-ty

Does that fix the problem?

The validator shows that the <th> tags are still being closed with </td> tags.

@coothead fixed that twice for you. What coohead was saying in his last message to you is that you have to keep your eyes and validator open because details matter. :slight_smile:

Okay. Fixed it.

:lol: Does that mean that you changed the erroneous </td> tags or that removing {width:12em} from the anchor fixed the overflowing table?

Just for our information, What is the width of the narrowest device you are trying to fit?

:smile_cat:

Where the min-width is now is currently working on my small mobile phone and fine on the big screen.

Do you think it’s preferable to have a block-anchor at the bottom back to the home page link even though the link span is accessible on the entire lower line?

—I also think I have a working file solution. You can click on the first link and see my hosted files, and it performs as I need it to, but is there any way to adjust the default styles for the bin hosts on the web server? :pensive:

—Is there a way to post a time stamp of when the file was uploaded? :hushed:

Hi there

I keep removing these attributes…

 class="col3"

…from your td elements, and you continue to replace them. :wonky:

Do you have some aesthetic reason for their retention? :rolleyes:

coothead

I thought I had copied and pasted directly from your post, but it looks like I messed up. :confounded:.

The class on the third column has been removed.

Edit: I just added a bottom-border to the td elements. :smashy:

-ty

All right, coothead & Ronpat,

I have decided that I needed to design vertically based tables for smaller viewport widths, so I designed .skinnytables beginning at line 91, publicrecords.css. I want to add a media query for when to show and when to hide the .skinnytables- the default is showing the widetables in the widest viewport widths. You can see the new skinny tables I have designed on the updated site. :biggrin:

I also have been opting for an Open Link in New Window anchor.

Files Updated

-ty :smashy:

I would make a mobile optimized table using the technique demonstrated by @PaulOB in this post #165: Media Queries Responsive - #165 by PaulOB
It would have to be adapted to your layout, of course, but that’s the route I would take.

PS: according to the validator, “_new” is not a valid value for the target attribute. A little reading shows that target="_blank" would be.
https://css-tricks.com/use-target_blank/

Oh, but I think this is rather close to finished. :smashy:

I just need to know what’s going on with the wide tables links and why they a couple of them are different sizes and why the width is a little less than full-column width on the wide tables. I think it looks great at slimmer widths now.

Files Updated.`

Can you clairfy exactly what you are referring to, Ty?
A couple of what are different sizes?
<a class="littelink" littlelink is misspelled in the second row.

.content has a width of 95%, and inside that .documents has a width of 94%.

Is any of this what you are referring to?