CODEWITHSUNDEEP
htmlcss
Username
Username

Reputation: 103

How to create table with multipe columns?

Here's my current code:

<tbody>

    <tr><th colspan="7">TEST TITLE</th></tr>
    <tr><td colspan="1">10-19-2014 - Test</td></tr>
    <tr><td colspan="1">10-20-2014 - Test</td></tr>
    <tr><td colspan="1">10-21-2014 - Test</td></tr>
    <tr><td colspan="1">10-22-2014 - Test</td></tr>
    <tr><td colspan="1">10-23-2014 - Test</td></tr>
    <tr><td colspan="1">10-24-2014 - Test</td></tr>
    <tr><td colspan="1">10-25-2014 - Test</td></tr>
    <tr><td colspan="1">10-26-2014 - Test</td></tr>

</tbody>

Here's how the table is showing up:

TITLE
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION
INFORMATION

This is how I want it to show up:

TITLE
INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION | INFORMATION

Since I've specified the column span as being 7 for the title, I thought that each of the other tds would show up as left to right instead of showing each on a new line.

What am I doing wrong here?

Upvotes: 1

Views: 83

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201708

To create multiple columns, you need to have rows (tr elements) with multiple cells (th or td elements). You now have just rows with one cell in each. Just specifying colspan="7" for the cell of the first row says that the table has 7 columns, but in fact it does not: all other rows have just one cell in one column, and your markup is even formally invalid (violates the HTML table model).

To fix this, just put the other cells on one row:

td + td { border-left: solid; }
<table>
<tbody>
    <tr><td colspan="7">TEST TITLE</td></tr>
    <tr>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       <td>10-19-2014 - Test</td>
       </tr>
</tbody>
</table>

Notes: The colspan="1" attribute is redundant; it just states the default. The cell that spans 7 columns is best defined as a td element, not th, since th elements specify headers for all columns or rows (columns in this case) in a table; some text that is just a heading for some part of a table should thus be just a data cell, td. The “how I want it to show up” part in the question suggests that there should be borders between the cells, but not elsewhere; I have added a simple CSS rule to show how this could be achieved (by setting left border on every cell except the first one in a row).

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

One posible solution without change at all your html:

table tbody tr:not(:first-child) {
    float: left;
}
table tbody tr:first-child {
    text-align: left;
}
table tbody tr:not(:first-child):not(:last-child) td:after {
    content: "|";
    padding-left: 10px;
}
<table>
  <tbody>
    <tr>
      <th colspan="7">TEST TITLE</th>
    </tr>
    <tr>
      <td colspan="1">10-19-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-20-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-21-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-22-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-23-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-24-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-25-2014 - Test</td>
    </tr>
    <tr>
      <td colspan="1">10-26-2014 - Test</td>
    </tr>
  </tbody>
</table>

I use a combination of pseudo-elements and pseudo-class to achieve this.

Upvotes: 1

jake
jake

Reputation: 11

This is how I do it. You create many table dividers within a single row. For the title, I give it it's own row, but make the colspan the same length as the maximum number of rows in the table. Just because you specify 7 for the colspan in the title does not mean that the <td> is automatically generated for you. 

<table>
    <tr>
        <td colspan="7">
            Title
        </td>
    </tr>
    <tr>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
        <td>
            Information
        </td>
    </tr>
</table>

if you don't know the total amount of columns and it needs to be dynamic, you could use a repeater inside the table to generate multiple instances of <td>

<table>
    <tr>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <td>
                    Information
                </td>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
</table>

Upvotes: 1

mildog8
mildog8

Reputation: 2154

    <table>
        <tr>
            <th colspan="7">TITLE</th>
        </tr>
        <tr>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
            <td colspan="1">
                INFORMATION
            </td>
        </tr>           
   </table>

Upvotes: 0

Related Questions