Modern HTML files use Cascading Style Sheets to store presentation and styling information. By creating a .css file that is linked from the exported HTML, the table structure can be cleaned up and presented in a more legible way.
- [Instructor] Now that we have a basic HTML export of our data we can begin to alter the page to make it a little bit more attractive. We saw that the formatted export includes a lot of color and font descriptors directly in the table structure. A better way to style an HTML document is to place all the formatting details in a separate file called a cascading style sheet, or a CSS file. Let's see how to add one of our basic query export. We'll start by modifying the unformatted HTML file from the query that we exported in the last movie. First, let's go ahead and remove the styling information included in this file that determines the reading direction as left to right, and the alignment for each cell.
Sometimes it's right, and sometimes it's left. To do that I'm going to use my text editor's replace function which, in brackets, I can find underneath the Find menu, then come down to Replace. The text I want to replace is space DIR=LTR space ALIGN=RIGHT. I'm not going to replace it with anything so I'll just leave the replace with blank, and choose Replace All. That'll go ahead and get rid of that text. Next, let's do the same thing, and get rid of the text that says DIR=LTR ALIGN=LEFT.
I'll go ahead and modify the search text to say ALIGN=LEFT. Once again, I'm going to replace it with nothing, and we'll just replace everything. That'll clean up all the text in the data cells. Then we need to add in a few new lines of text. We can identify each part of the table based off of the tags that surround the content. Every row in the table will be wrapped in TR tags. Then each cell gets wrapped in tags of their own. The unformatted HTML file unfortunately doesn't include the header information so we'll have to add that in manually. The header cells use the TH tag which is different from the data cells which we can see here that use the TD tags.
We can write rules in our CSS file that targets each of these tags individually, and any content that uses the tag will adopt that formatting. This makes it easy to write a single rule that'll apply to the entire table rather than formatting each and every row individually. Let's go ahead and add in that header row. We'll add in the first row here so I'll go up here, right below the caption line, and I'll press Enter a few times to move that text down. Then we're going to start in a new table row. So I'll open a bracket, and type in TR, and then close the angle bracket. Let's go and move this down a little bit.
Inside of the table row is going to be a number of table header cells. Those will get the TH tag. I'll go ahead and open one of those. Now my text editor automatically includes the closing tags for me so I don't have to type those in. Depending on which editor you're using you might have to type in the closing table header tag as well. Just type a opening bracket, a slash, TH, and then a closing bracket. Inside the first table header cell is going to be the name of the first column which, in this table, is Customer ID. That finishes the first table header cell, and we'll come in and type in the second.
Once again, I'll start a new table header cell, and this cell is going to be First Name. The next cell is Last Name followed by Lifetime Sales, and, finally, the State. We can go ahead and remove the empty lines, and bring those back up the screen. So I'll add in the header row at the top of the table. Next we need to make a reference to the CSS file that we're about to make for the formatting. Now we haven't created that file yet, but it's going to go in the same folder as our HTML file.
So we can go ahead and link to it, and we'll do that up in the Head section of our file. Find the line that starts with META, and we'll make a space down below it. This is where we'll type in the link to our style sheet. We'll open a bracket, and we'll type in link rel = and then in quotes stylesheet, then after the closing quote we'll type in type=, in doublequotes we'll type in text/css, a closing quote, then href is equal to and the name of the CSS file that we're about to make, which I'll just call table.css.
At this point we've made all of the changes to our HTML file that we need to. Let's go ahead and save it, and take a look at the changes in the web browser. I can go ahead and leave it open up here inside of my text editor, and we'll switch over to the browser. If I refresh the screen we'll see the addition of the header row at the top there. Now I actually get this text up here that says Top 100 Customers twice. That indicates to me that I actually have a typo so let's go back into the text file, and it looks like I forgot the closing bracket after table.css in the closing quote. Let's go ahead and add in that bracket, and I'll save it one more time. Switch back into my browser, refresh the screen, and that second instance of the title goes away.
So there's the finished HTML file. Let's go ahead and create that CSS file now. I'll switch back into the text editor. Let's create a new file. I'll go to File, New, and I'm going to immediately save it. Select a file and choose Save. Then I'll browse into my exercise folder which is on the Desktop. Exercise, Chapter 1, the 01_02 formatting folder, and we'll go ahead and save it here. We said that we're going to save this as table.css. I'll press the Save button, and we're now working in that new file. The CSS file will describe how to format our table, and once it's built, we'll be able to use it over and over again to quickly spruce up future exports.
Let's start by styling the table. To create a CSS file we type in the tag that we want to target. In this case we're going to target the entire table with the table tag. Then we open up a curly bracket, and we'll type in the different properties down below. In this case, for the table, the only property I want to change is the border-collapse property. I'll type in border-collapse. We'll follow that with colon, and then the value collapse. We'll finish the line with a semicolon, and that finishes our table property. And this way we can save those changes here.
I'll go to File and Save, and then we can switch back into the web browser to see that change. Once again, I'll refresh the screen, and we see that my table has now collapsed, and I don't have those double borders between every cell. Let's go back and continue modifying our CSS file. The next thing I want to do is target both the data cells and the header cells, and I can do that by targeting td comma th. Those are both of those tags. We'll open up another curly brace, and the first property is border. I want to set it to one pixel in width, a solid line, and the color #aaa.
That'll set it to a nice gray color. I'll type in a semicolon go down to the next line. The next thing I want to do is add some space around the text. We'll use the padding property for that, and we'll set a padding of five pixels. Then I want to make sure that all of my text is aligned to the left side of each cell. We'll use the text-align property, and we'll set it to left. And, finally, I want to change the font family from a serif font that it's defaulting to to Arial, which is a san-serif font. I'll type in the font-family property, and we'll change it to Arial.
Once again I can go ahead and save my changes here, and we'll switch back into the web browser to see the changes. When I refresh the screen you can see everything updates. We can see that we have the table cells are now bordered by a light gray color. We have a little bit of padding here between the border cells and the text itself, and the font family has been changed to Arial. Let's go back into the CSS file and make some more changes. Next I want to edit just the header row, and we can do that by targeting the th cells. The first property here is just the background color, and I want to set it to a color that matches the branding for the Kinetico company, which I know is #007189.
That'll give a really nice teal, or a blue color. Now this background color's a little bit dark, and I want to make sure that I read the text still so we'll change the text color to FFF which indicates white. Once again I'll save the changes, and we'll switch back to the browser, and reload the page to see that change here on the top header row. Okay, let's go back into our CSS file and make another change. Next I'd like to add in alternating color to each data row. We can do that by targeting the data rows in the nth-child and then in parentheses we'll type in odd.
We'll open up a curly brace, and inside of there we'll set the background color to #CCC. If I save this, and let's switch back into my browser again, and reload the page once more. We'll see that we get different colors for each of these alternate columns. If I go back into my text editor, and change this from td to tr we'll alternate every row instead of every column. Now let's go ahead and save that. We'll go back to the browser and reload the page, and you'll see that it alternates to every row instead. Finally, I want to change the caption that's appearing here at the top of the page.
I want to make it a little bit bigger. Back inside of my text editor we'll create another property for caption. We'll change its font size to 24 pixels, and we'll change its padding to 10 pixels. That'll give us some extra breathing room around the text. Let's go and save this, and one more time back into our browser, reloading the page, and we'll see that that title is now bigger and has some breathing room around it. So now our table is much easier to read than what we started with. By starting with the basic HTML export and adding in a bit of custom styling with the additional of a cascading style sheet you can spruce up the table, and make it easier to read, and fit in with your company's branding.
In this course, Adam Wilbert shows you how, by exploring options for getting your data out of Microsoft Access, making it easier to share with others. He covers Access data export options, and demonstrates how to modify exported files with a text editor. He also explains how to link Access to an Azure SQL database to provide a cloud storage solution for your Access tables.
- Why not use web apps?
- Exporting data to HTML
- Formatting HTML with table CSS
- Working with data exports
- Converting data to JSON
- Building a webpage to parse exports
- Linking to an Azure SQL database
- Linking Access to Azure tables
- Interacting with data on the web