Can someone look over this code for me please for improvements and fixes

HTML & CSS
1

My Code: https://jsfiddle.net/fb6sa75d/1/

And here’s working example of it: https://testblogty678.blogspot.com/

Can someone take a look at this code for me and tell me if there’s
anything you would change to either fix it if it needs fixing, or if
there are any ways I can improve upon the code.

    <table align='center' height='100%'>
      <tr>
        <td valign='middle'>
          <table>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
2

Your question is rather vague and general.

You could start by putting your styles in an external stylesheet instead of embedded in the code.

1 Like
3

An easy test you can do yourself is to put the code to the Validator, it will point out errors in syntax.
https://validator.w3.org/nu/#textarea
As it is, there is no “Doctype” declaration, so we don’t know which version of html it is supposed to be.
What the validator will not tell you is best practice.
Without any actual content it’s hard to judge the html in context, as in whether this is appropriate use of html tables.
This first element I don’t recognise:-

<b:section class='main' id='main' showaddelement='yes'/>

It appears to be something to do with “Blogger”. :confused:

Attributes for alignment like align='center' and valign='middle' are obsolete and should be done with css.
height='100%' on a table element is meaningless, even if it were within a style attribute.
And actually using the style attribute for in-line styling is quite an out dated method, it’s best to keep all styling with a css.
Also the use of <br/> like this isn’t great. It may be better to put the content in <p>s, but again hard to judge without actual content to see the code in context.
If it is html5, you don’t need the trailing slash on self-closing elements, so <br> would do.

3 Likes
4

Can you make adjustments and send me an updated JSFiddle: https://jsfiddle.net/fb6sa75d/5/

5

That’s because it’s not part of it, I just removed it.

6

If align=‘center’ isn’t in there then it looks crooked.

7

It’s a “namespace”.

As seen in the pages view-source

<html xmlns='http://www.w3.org/1999/xhtml' 
   xmlns:b='http://www.google.com/2005/gml/b' 
   xmlns:data='http://www.google.com/2005/gml/data' 
   xmlns:expr='http://www.google.com/2005/gml/expr'>

2005 suggests a reason why the mark-up looks more like an email template than a web page.

8

it’s blogger.

9

Sorry, I somehow missed the link to the working page, I was just going on the code that was posted.
This will give you a start on what needs to change:-

That’s what css is for.

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.