Understanding Tables

HTML/CSS
1

In the HTML course part one, mosh talks about creating tables. I’m trying to use the “border-collpase” using CSS, when I apply this I’m not seeing the desired result.

There are two screenshots, the first is my table i created, and second is a screenshot of what mosg created.

Notice how in his table the border is collpased. I feel this is a simple sysntax error, can someone help poit out what I missed so the border will collpase?

Table 1
Table 1776×298 21.9 KB

Table 2

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <table>
      <tr>
        <td>Marketing</td>
        <td>$100.00</td>
      </tr>
      <td>Advertising</td>
      <td>$200.00</td>
    </table>
  </body>
</html>

CSS

td {
    font-size: 25px;
    border: 1px solid grey;
    border-collapse: collapse;
}
2

Hi @techytony

I think you should apply the ‘border-collapse’ on the table tag

table {
    border-collapse: collapse;
}

td {
    font-size: 25px;
    border: 1px solid grey;
}

And don’t forget to wrap your '<td>' inside the '<tr>' tag

<tr>
      <td>Advertising</td>
      <td>$200.00</td>
</tr>
3

Indeed.
I got into the same problem when I did the exercises.

1 Like