Search code examples
htmlcssborder

HTML border for the table fails to load


I'm a beginner in HTML and am trying to create a table with borders.I had defined the border attribute for the code in a separate CSS file that is attached to the HTML file through a link relating with stylesheet.

Here's the html code for the head part:

 <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="about_css.css" type="text/css">
        <link rel="icon" href="jesse.ico" type="image/x-icon">
        <title>About page</title>
 </head>

Code for the table:

 <table>
                <tr>
                    <td>
                        <time datetime="08:00">8am</time> to 
                        <time datetime="09:00">6pm</time>
                    </td>
                    <td>Refresh</td>
                </tr> 
                <tr>
                    <td>
                        <time datetime="09:00">9am</time> to 
                        <time datetime="13:00">1pm</time>
                    </td>
                    <td>Work</td>
                </tr>
                <tr>
                    <td>
                        <time datetime="13:00">1pm</time> to 
                        <time datetime="14:00">2pm</time>
                    </td>
                    <td>Lunch</td>
                </tr>
  </table>

The CSS code:

table, tr, th, td, caption{
    border: 1x, solid #eee;
    font-family: 'Courier New', Courier, monospace;
    border-collapse: collapse;
    padding: 0.5rem
}

I was watching this one YouTube tutorial who was using the similar code and it worked fine for him.


Solution

  • You are simply missing a few characters!

    1x should be 1px, and there should not be a comma between 1px and solid #eee

    border: 1x, solid #eee;
    

    Should be:

    border: 1px solid #eee;