HTML & CSS Table formatting issue

Question

I'm trying to create a table with html and using css to style it. I want it to be 8 rows and one column, but the rows are weirdly formatted, and the column only covers one piece of the table see ss

HTML:

<section class="table-body">
    <div class="table">
    <table border="1">
  <tr>
    <th>Skills</th>
  </tr>
  <tr>
    <td>HTML & CSS</td>
    <td>MySQL</td> 
    <td>White Box Testing</td>
    <td>Black Box Testing</td>
    <td>Computer Networking</td>
    <td>Corporate Cybersecurity Best Practices</td> 
    <td>Python</td>
    <td>Software Engineering</td>
  </tr>
</table>
</div>
</section>

CSS:

.table th, td{
    border: 1px solid;
    color: white;
    padding: 5px;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/footer.jpeg);

}

I tried using some of the code from W3, and played around with the <td> and <th> but the "Skills" column will not cover the entire table.

This is how I was expecting it to look.

                            Skills

gugateider · Accepted Answer · 2022-03-24 00:53:19Z

1

What you need is to use the colspan attribute.

<section class="table-body">
    <div class="table">
    <table border="1">
  <tr>
    <th colspan="8">Skills</th>
  </tr>
  <tr>
    <td>HTML & CSS</td>
    <td>MySQL</td> 
    <td>White Box Testing</td>
    <td>Black Box Testing</td>
    <td>Computer Networking</td>
    <td>Corporate Cybersecurity Best Practices</td> 
    <td>Python</td>
    <td>Software Engineering</td>
  </tr>
</table>
</div>
</section>

In your case, colSpan="8" so it spans 8 columns

answered Mar 24, 2022 at 0:53

gugateider

2,0872 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML & CSS Table formatting issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related