How to create an integrated row in the table?

Question

I have a table like this:

+----------+----------+
| record 1 | record 2 |
+----------+----------+
| record 3 | record 4 |
+----------+----------+
| record 5 | record 6 |
+----------+----------+

Now I want to add a integrated row in the first of it, something like this structure:

+---------------------+
|     Table Name      |
+----------+----------+
| record 1 | record 2 |
+----------+----------+
| record 3 | record 4 |
+----------+----------+
| record 5 | record 6 |
+----------+----------+

Here is my codes:

HTML:

<table cellspacing="0">
    <tr>
        <td>
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

CSS:

td{    
    padding: 5px;
    border: 1px solid;
}

Also here is a fiddle.

So, How can I do that?

score 2 · Accepted Answer · answered Oct 26 '15 at 19:22

2

You need to use the colspan attribute.

td{    
    padding: 5px;
    border: 1px solid;
    text-align: center;
}

<table cellspacing="0">
    <tr>
        <td colspan="2">
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

answered Oct 26 '15 at 19:22

Florin Pop

5,105
3
25
58

Thanks +1. has `colspan` a equivalent in CSS? – Shafizadeh Oct 26 '15 at 19:24
1

Unfortunately, no. It's something related to HTML. You can also see this post: http://stackoverflow.com/questions/2403990/html-colspan-in-css – Florin Pop Oct 26 '15 at 19:25

score 2 · Answer 2 · answered Oct 26 '15 at 19:22

Use a thead with colspan to differentiate the content from the label. Make the rest of your content in the tbody:

<table cellspacing="0">
    <thead>
        <tr>
            <th colspan="2">Table Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>record 1</td>
            <td>record 2</td>
        </tr>
        <tr>
            <td>record 3</td>
            <td>record 4</td>
        </tr>
        <tr>
            <td>record 5</td>
            <td>record 6</td>
        </tr>
    </tbody>
</table>

And slightly adjust the CSS:

td, th {
    padding: 5px;
    border: 1px solid;
}

See DEMO

score 1 · Answer 3 · answered Oct 26 '15 at 19:23

Use colspan.

<table cellspacing="0">
    <tr>
        <td colspan="2">
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

Here's a fiddle.

Oriol · Answer 4 · 2015-10-26T19:41:23.683

1

Use caption elements for table titles:

The caption element represents the title of the table that is its parent

As explained in Tables in the visual formatting model, caption boxes are rendered as normal block boxes inside the table wrapper box, but outside the table box:

table {
  border-spacing: 0;
}
caption, td {    
  padding: 5px;
  border: 1px solid;
}

<table>
  <caption>Table Name</caption>
  <tr>  <td>record 1</td> <td>record 2</td>  </tr>
  <tr>  <td>record 3</td> <td>record 4</td>  </tr>
  <tr>  <td>record 5</td> <td>record 6</td>  </tr>
</table>

edited Oct 26 '15 at 19:41

answered Oct 26 '15 at 19:30

Oriol

274,082
63
437
513

Yeah, Seems nice ...! +1 – Shafizadeh Oct 26 '15 at 19:34
I don't like that the caption border doesn't collapse with others when using `border-collapse: collapse`, though. – Oriol Oct 26 '15 at 19:35

How to create an integrated row in the table?

4 Answers4