Table borders are not seen

HTML-CSS
1

Hi everyone!

I am experiencing currently an issue with the borders which are not displaying for some reason on the webpage when I open it.

I have checked on the internet, and for majority of people the problem was the lack of html tags or meta tags or doctype tag, but in my case it seems like I do have all necessary tags for that.

If you have any idea/suggestion what could be the reason for that in my case, I would appreciate it.

Here is my code:


<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Little Taco Shop Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    
    <body>
        <header>
        <h1>Welcome to the Little Taco Shop!</h1>

        <nav aria-label="Primary navigation">
            <ul>
                <li>
                    <a href="#about">About Little Taco Shop</a>
                </li>
                <li>
                    <a href="#menu">Our Menu</a>
                </li>    
                <li>   
                    <a href="#openinghours"><a href="hours.html">Opening Hours</a></a>
                </li> 
                <li>
                    <a href="#contactus"><a href="contact.html">Contact Us</a></a>
                </li>
            </ul>
        </nav>  

            <img src="img/tacos_and_drink_400x267.png" alt="Tacos on the table" title="Visit Little Taco Shop">
            <figure>
                <figcaption>Tacos & a drink</figcaption>
            </figure>

            <hr>

        </header>

        <main>
            <article id="about">
                <h2>About Little Taco Shop</h2>

                <p>Little Taco Shop was founded in 2022. Our shop was built from a love for tacos. We hope our shop adds a unique and interesting place to our little town.</p>

                <h3>Taco Trivia</h3>
                <aside>
                    <details>
                        <summary>When did taco <mark>first appear</mark> in the United States?
                        </summary>
                        <p>The Taco was first introduced to the United States in 1905. Mexican migrants were coming in to work on railroads and other jobs and started to bring their delicious food with them. Tacos were essentially a street food at this time since they were highly portable and cheap.</p>
                    </details>
                </aside>
            </article> 

            <hr>

            <article id="menu">
                <h2>Our Menu</h2>
                <table>
                    <caption>Our Tacos</caption>
                    <thead>
                        <tr>
                            <th>Tacos</th>
                            <th scope="col"><abbr title="Quantity">Qty</abbr></th>
                            <th scope="col">Price</th>
                        </tr> 
                    </thead>

                    <tbody>
                        <tr>
                            <th scope="row" rowspan="3">Crunchy</th>
                            <td>1</td>
                            <td>$1.50</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>$2.50</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>$3.25</td>
                        </tr>

                        <tr>
                            <th scope="row" rowspan="3">Soft</th>
                            <td>1</td>
                            <td>$2.00</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>$3.50</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>$4.50</td>
                        </tr>
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="3">Chips &amp; Salsa $2</td>
                        </tr>
                    </tfoot>
                </table>

                <br>
                
                <p><a href="#">Back to Top</a></p>
            </article>
        </main>    
        </body>

        <hr>

        <footer>
            <p>Copyright &copy; The Little Taco Shop</p>
        </footer>
</html>
2

try looking into this article from mdn, should be helpful, happy reading :slight_smile: HTML table basics - Learn web development | MDN

1 Like
3

If you want something like this:

image

you have to make some corrections in HTML code and add CSS code. Within ‘tbody’ element you should have three ‘td’ elements within each ‘tr’ element.

Wrap the table in div tags with a class set to “table”. Then, add some styling to that class in the styles.css file:

.table {
	display: flex;
	justify-content: somevalue;
	align-items: somevalue;
	margin-top: Xpx;
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	margin: Xpx 0;
}


.table td, .table th {
  width:  Xpx;
  border: Xpx solid #ddd;
  border-collapse: collapse;
  padding: Xpx;
}

This is just guidance. You can not use this code per se; instead, you should add some value for each X in the code given above.
Try to play around with these suggestions.

2 Likes
4

Thank you very much!

2 Likes
5

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