CODEWITHSUNDEEP
htmlcss
Mihir Sanjay
Mihir Sanjay

Reputation: 41

Align column heading to data in CSS/HTML

I'm learning how to make a table in HTML , however the "c" column heading does not align with its data, and is instead grouping up with the "b" column heading.

Output:

Table with incorrect table headings

Here is the code:

table,th,td{
  padding:20px;
  border:10px solid navy;
}
    <body>
        <table>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="30">Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </td></form>
            </tr>

        </table>
    </body>

I tried changing the values of padding in the <th> tag for "c" and "b" , but it doesn't seem to resolve the problem. How do I fix this?

Upvotes: 2

Views: 447

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105873

You need to read a few tutorials about HTML <table> to help you build them and understand the use of rowspan and colspan . here is a few https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table https://html.com/tables/rowspan-colspan/ https://html.com/tags/table/ & plenty more via your search engine :)

Fixing your code with missing tag, removing unneeded attributes and closing the form/td properly , you could have done that structure :

table,
th,
td {
  padding: 20px;
  border: 10px solid navy;
}
<body>
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Apples</td>
        <td>
          <form>
            <input type="checkbox" name="50g" />0.5Kg
            <input type="checkbox" name="50g" />1Kg
            <input type="checkbox" name="bag" />Paper Bag?
          </form>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>Apples</td>
        <td>
          <form>
            <input type="checkbox" name="50g" />0.5Kg
            <input type="checkbox" name="50g" />1Kg
            <input type="checkbox" name="bag" />Paper Bag?
          </form>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>Apples</td>
        <td>
          <form>
            <input type="checkbox" name="50g" />0.5Kg
            <input type="checkbox" name="50g" />1Kg
            <input type="checkbox" name="bag" />Paper Bag?
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</body>

Have fun learning.

Upvotes: 0

Sunny Parsana
Sunny Parsana

Reputation: 114

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        table,th,td{
  padding:20px;
  border:10px solid navy;
}
    </style>
    <body>
        <table>
            <th width="15%">a</th>
            <th width="70%">b</th>
            <th width="15%">c</th>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </form></td>
            </tr>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </form></td>
            </tr>
            <tr>
                <td>1</td>
                <td>Apples</td>
                <td><form>
                    <input type="checkbox" name="50g"/>0.5Kg
                    <input type="checkbox" name="50g"/>1Kg
                    <input type="checkbox" name="bag"/>Paper Bag?
                </form></td>
            </tr>

        </table>
    </body>
</html>

Hello Mihir, Below code help on screenwise check it I think got results 100%.

Upvotes: 0

Roy
Roy

Reputation: 8069

Two things to solve your problem.

  1. Make sure your HTML is valid. Your HTML is currently invalid, since you are have the closing </td> before the closing </form>. It should be like </form></td>.
  2. Remove colspan="30" attribute from every td, change it like:
<td colspan="30">Apples</td>

to

<td>Apples</td>

colspan indicates for how many columns the cell extends. Now it was extending for 30 columns, and you don't have that many columns. Read more at MDN.

<html>
<style>
  table,
  th,
  td {
    padding: 20px;
    border: 10px solid navy;
  }
</style>

<body>
  <table>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <tr>
      <td>1</td>
      <td>Apples</td>
      <td>
        <form>
          <input type="checkbox" name="50g" />0.5Kg
          <input type="checkbox" name="50g" />1Kg
          <input type="checkbox" name="bag" />Paper Bag?
        </form>
      </td>

    </tr>
    <tr>
      <td>1</td>
      <td>Apples</td>
      <td>
        <form>
          <input type="checkbox" name="50g" />0.5Kg
          <input type="checkbox" name="50g" />1Kg
          <input type="checkbox" name="bag" />Paper Bag?
        </form>
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>Apples</td>
      <td>
        <form>
          <input type="checkbox" name="50g" />0.5Kg
          <input type="checkbox" name="50g" />1Kg
          <input type="checkbox" name="bag" />Paper Bag?
        </form>
      </td>
    </tr>

  </table>
</body>

</html>

Upvotes: 1

Clout Hack
Clout Hack

Reputation: 65

You need to change your HTML so the form closes properly:

    <tr>
        <td>1</td>
        <td colspan="30">Apples</td>
        <td><form>
            <input type="checkbox" name="50g"/>0.5Kg
            <input type="checkbox" name="50g"/>1Kg
            <input type="checkbox" name="bag"/>Paper Bag?
        </form></td>
    </tr>

Today's browsers are very smart and can render invalid HTML, but in order to have control about how your HTML is rendered, you should always use valid Syntax.

Upvotes: 0

Related Questions