• Hi, I am trying to make a table that looks like this

    However, I am not sure why after I paste the CSS code into EditCSS, and the HTML code to the page I want it to be, the table is not displaying properly.
    It looks like the table is not calling the class at all.

    I tried both inline property like

    <table style="border-collapse: collapse; font-size: 12pt; text-align: left;">
        <tr>
            <th style="height: 2px; border=none"><div class="hurdles-icon"></div></th>
            <th style="height: 2px; border=none">60mH, 110mH, 400mH</th>
        </tr>
        <tr>
            <th style="height: 2px; border=none"><div class="location-icon"></div></th>
            <th style="height: 2px; border=none">London, Ontario</th>
        </tr>
    </table>

    But its not working as well.
    I haven’t put the table up on my site yet, not until I get this fixed.
    Does anyone why is this happening?

    Thanks

    P.S. I am using SKT White theme if that matters.

Viewing 8 replies - 1 through 8 (of 8 total)
  • this is invalid code:
    <th style="height: 2px; border=none">
    try:
    <th style="height: 2px; border: none; ">

    the invalid code might have stopped the CSS class to be applied (?);
    try and validate your site to see if you get any error massages or warnings;
    http://codex.ww.wp.xz.cn/Validating_a_Website

    Thread Starter bryanlimy

    (@bryanlimy)

    Oh sorry, that was a typo, I had that, and that didn’t work either.

    I haven’t put the table up on my site yet, not until I get this fixed.

    any chance that you can add the table, and post a live link to the page with the table problem?

    what CSS formatting are you trying to apply?

    what were the results of the validation tests?

    Thread Starter bryanlimy

    (@bryanlimy)

    I just made a new page and post it here

    This is the CSS i have

    .athlete-info-table {
    	border-collapse: separate;
    	border-spacing: 3px 0;
    	font-size: 12pt;
    	text-align: left;
    }
    
    div.hurdles-icon {
    	content: url(http://www.trackieprofile.com/wp-content/uploads/2015/04/hurdles-icon.png);
    	width: 25px;
    	height: 25px;
    }
    
    div.location-icon {
    	content: url(http://www.trackieprofile.com/wp-content/uploads/2015/04/Location-icon.png);
    	width: 25px;
    	height: 25px;
    }

    This is the HTML on the page

    <center>
    <table class="athlete-info-table">
        <tr>
            <th><div class="hurdles-icon"></div></th>
            <th>60mH, 110mH, 400mH</th>
        </tr>
        <tr>
            <th><div class="location-icon"></div></th>
            <th>London, Ontario</th>
    </tr>
    </table>
    </center>

    are you sure you are using the content property correctly?

    where did you find this way of using content?

    http://www.w3schools.com/cssref/pr_gen_content.asp

    Thread Starter bryanlimy

    (@bryanlimy)

    I am only using content to show the icon, even after I remove the div block, the table is still not showing correctly.

    I went to your link and I got a Page not Found error. However, I copied & pasted your HTML & CSS into a post and it seems to work. See here.

    Thread Starter bryanlimy

    (@bryanlimy)

    Oh sorry yeah, I took it down.

    That’s weird…

    Thanks tho, I will keep trying

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Table not working with CSS and HTML’ is closed to new replies.