Build Your Own Business Website header image

How to Convert Tables Created in Word to Standards Compliant Markup

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part – 1 Change the Markup

This is the first of two videos in the series How to Convert Tables Created in Word to a Standard Compliant Markup. In this session we show how to convert tables created in MS Word to standards compliant markup by simply copying the text from the website and using a text editor like notepad to remove all the styling. Then we paste the plain text into the post and add some basic styling to the text.

Video Transcript

Okay so Monty, we’re going to go over to your site here and we’re going to take a look at… let’s see. This is And what you have done here is you have blocks of information that you styled in Word and that you imported as tables in order to create the style. And that… and what we’re going to do is we’re going to take the same content and we’re going to remove all of the table styling and we’re going to do it with Standards Compliant markup rather than Word document markup. And I want to show you why we’re doing this here first. We’re going to view the page source for this and then come down to our… okay.

So what you see is this is the… am I in the right spot? Let me just go back to this. Close that source, look at this, Adverse Reactions Q&A is what I’m looking for. So let’s see, Adverse Reactions Q&A, okay I can’t even find it. It must be right in here someplace. It’s right here. No, I found it right there, yeah.

So what you have is because of the table construction, you have this table code here plus the table body plus the table row plus this table code here and then some more code with inline code and then some more inline code all the way ‘til you get to Adverse Reactions Q&A. And the problem with this is that when Google is going to index this, Google has to pick this piece of the code out of all the rest of this stuff. So you’ve got all of this content here with only these… with only this as text that you want indexed. And the problem is that… or current web standards require that styling be separated from content and what we have right here styling width = 6.65 inches border black 1 pt border bottom none background such and such.

These are all styles and these are all styles that are inline. That is, styles that are absolutely linked to the content. And in fact, you can see this piece of styling is repeated again here and in fact, if we scroll down here, you’d see it repeated over and over and over again in these… in each one of these things. There it is again and the reason it’s repeated over and over and over again is because inline style. And so if you wanted to change each of these blocks from 6.65 inches wide to 4.65 inches wide, you’d have to change each and every one of them. So current web standards suggest and require that that sort of definition happen in a CSS file entirely apart from content. The benefit of that is that that Google doesn’t need to read code before it can index content. And so, that’s what we’re going to work on here.

And we’re going to do it on… not this page. Let’s see, all posts but Granny Smith, edit. And what I have done here is I have taken the contents of that page. So I’ve taken the contents of this page and just copied it like this. And with it copied, I opened it up in plain text editor, in this case, Notepad and just pasted it which got rid of 100% of all the styling. So now all this is just plain text. And I took that plain text and I pasted it in… well in fact, I should just do that so you can see what that looks like. I took this plain text and just pasted it. Well, let’s stop there in a post and with it pasted in a post then I came along and gave it styling.

So for example, we’re going to take this Adverse Reactions and we’re going to make it an h2. Actually, you know what? Let’s see, let’s create a new post. I didn’t paste that right, I think. Actually, it’s fine. Take this and instead of pre-formatted, make it heading 2. Notice how I’ve applied all the way to every piece of text? That’s because in order for us to do this accurately, what we have to do is give ourselves spaces between this stuff. And so now, if I select this and go to heading 2, now that one is only heading 2 and then I’m going to make this one heading 3 and we’re going to leave this stuff as text and then come down here and I think we’ll make this heading 3. No actually, what I should’ve done is I should have pasted all this text in the visual editor, not the… I mean, I should have pasted all this in the HTML editor. So the plain text came out like that and I can switch over to this and I wouldn’t look like that way anymore. And now I can… still, I have to hit enter though, go to heading 2, go to heading 3. We can backspace now, come back down and again, select this as a heading 3 and so on and so forth. It went all the way through those ‘til I got done with the page which is Granny Smith, yeah. Granny Smith.

And so, I made these h2’s, I made each of these h3’s and so on and so forth. Some of the stuff that was bold, I just made bold. But what you do is just the basic, simple HTML tags that you would add to this page. And so, when you get down to where it should have been a list, right, I just selected those and selected unordered list so you can see that… oh actually, that’s not one. Where is one on my list? Right here, each of these lines need to be in a list so you just select them all and select unordered list and then it turns them all into list elements.

So we’ve got this stuff done and if we look at this page, this is a standard formatting that comes out of the box with it. It doesn’t look like the way you want it to look because you still want it to look like this. You still want headings, you still want your h tags to look like these things. You still want the boxes and that kind of stuff around the content. So we still have… so we have work we have to do in order to make that work.

0 Comments… add one
0 comments… add one