# DataTables example Complex headers (rowspan and colspan)

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports `colspan` and `rowspan` in the table's header, assigning the required order listeners to the `th` cells suitable for the columns the element covers.

As of DataTables 2, columns do not require their own unique header cell as was the case with DataTables 1.x - multiple columns can share a single `colspan` element, as shown in the example below. Only the Name column has a cell unique to it. Furthermore, when activating ordering on a `colspan` cell, it will automatically enable multi-column ordering for the applicable columns.

DataTables will automatically apply ordering listeners and icons to all cells in the table header. If you wish to disable this, you can use the `titleRow` option to tell DataTables which row to apply the ordering controls to, or use the `data-dt-order` property on the `th/td` cells in the table header. The value of this attribute (if present, it is entirely optional) controls the ordering listeners and icons:

- `data-dt-order="disable"` - Ordering listeners will not be attached to these cells, nor will ordering status icons be shown.
- `data-dt-order="icon-only"` - Ordering listeners will not be attached to these cells, but the ordering status icons will be shown.

If not defined, the cell will have an ordering listener attached and status icons shown (unless disabled with the `columns.orderable` option). See the `columns.orderable` option for more details.

In the example below, the HR info has `data-dt-order="disable"` applied to it. The other cells in the header are all clickable and have ordering status icons shown.

Name | Position | Contact
--- | --- | ---
HR info | Direct
Tiger Nixon | System Architect | $320,800 | Edinburgh | 5421 | t.nixon@datatables.net
Garrett Winters | Accountant | $170,750 | Tokyo | 8422 | g.winters@datatables.net
Ashton Cox | Junior Technical Author | $86,000 | San Francisco | 1562 | a.cox@datatables.net
Cedric Kelly | Senior JavaScript Developer | $433,060 | Edinburgh | 6224 | c.kelly@datatables.net
Airi Satou | Accountant | $162,700 | Tokyo | 5407 | a.satou@datatables.net
Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 | b.williamson@datatables.net
Herrod Chandler | Sales Assistant | $137,500 | San Francisco | 9608 | h.chandler@datatables.net
Rhona Davidson | Integration Specialist | $327,900 | Tokyo | 6200 | r.davidson@datatables.net
Colleen Hurst | JavaScript Developer | $205,500 | San Francisco | 2360 | c.hurst@datatables.net
Sonya Frost | Software Engineer | $103,600 | Edinburgh | 1667 | s.frost@datatables.net
Jena Gaines | Office Manager | $90,560 | London | 3814 | j.gaines@datatables.net
Quinn Flynn | Support Lead | $342,000 | Edinburgh | 9497 | q.flynn@datatables.net
Charde Marshall | Regional Director | $470,600 | San Francisco | 6741 | c.marshall@datatables.net
Haley Kennedy | Senior Marketing Designer | $313,500 | London | 3597 | h.kennedy@datatables.net
Tatyana Fitzpatrick | Regional Director | $385,750 | London | 1965 | t.fitzpatrick@datatables.net
Michael Silva | Marketing Designer | $198,500 | London | 1581 | m.silva@datatables.net
Paul Byrd | Chief Financial Officer (CFO) | $725,000 | New York | 3059 | p.byrd@datatables.net
Gloria Little | Systems Administrator | $237,500 | New York | 1721 | g.little@datatables.net
Bradley Greer | Software Engineer | $132,000 | London | 2558 | b.greer@datatables.net
Dai Rios | Personnel Lead | $217,500 | Edinburgh | 2290 | d.rios@datatables.net
Jenette Caldwell | Development Lead | $345,000 | New York | 1937 | j.caldwell@datatables.net
Yuri Berry | Chief Marketing Officer (CMO) | $675,000 | New York | 6154 | y.berry@datatables.net
Caesar Vance | Pre-Sales Support | $106,450 | New York | 8330 | c.vance@datatables.net
Doris Wilder | Sales Assistant | $85,600 | Sydney | 3023 | d.wilder@datatables.net
Angelica Ramos | Chief Executive Officer (CEO) | $1,200,000 | London | 5797 | a.ramos@datatables.net
Gavin Joyce | Developer | $92,575 | Edinburgh | 8822 | g.joyce@datatables.net
Jennifer Chang | Regional Director | $357,650 | Singapore | 9239 | j.chang@datatables.net
Brenden Wagner | Software Engineer | $206,850 | San Francisco | 1314 | b.wagner@datatables.net
Fiona Green | Chief Operating Officer (COO) | $850,000 | San Francisco | 2947 | f.green@datatables.net
Shou Itou | Regional Marketing | $163,000 | Tokyo | 8899 | s.itou@datatables.net
Michelle House | Integration Specialist | $95,400 | Sydney | 2769 | m.house@datatables.net
Suki Burks | Developer | $114,500 | London | 6832 | s.burks@datatables.net
Prescott Bartlett | Technical Author | $145,000 | London | 3606 | p.bartlett@datatables.net
Gavin Cortez | Team Leader | $235,500 | San Francisco | 2860 | g.cortez@datatables.net
Martena Mccray | Post-Sales support | $324,050 | Edinburgh | 8240 | m.mccray@datatables.net
Unity Butler | Marketing Designer | $85,675 | San Francisco | 5384 | u.butler@datatables.net
Howard Hatfield | Office Manager | $164,500 | San Francisco | 7031 | h.hatfield@datatables.net
Hope Fuentes | Secretary | $109,850 | San Francisco | 6318 | h.fuentes@datatables.net
Vivian Harrell | Financial Controller | $452,500 | San Francisco | 9422 | v.harrell@datatables.net
Timothy Mooney | Office Manager | $136,200 | London | 7580 | t.mooney@datatables.net
Jackson Bradshaw | Director | $645,750 | New York | 1042 | j.bradshaw@datatables.net
Olivia Liang | Support Engineer | $234,500 | Singapore | 2120 | o.liang@datatables.net
Bruno Nash | Software Engineer | $163,500 | London | 6222 | b.nash@datatables.net
Sakura Yamamoto | Support Engineer | $139,575 | Tokyo | 9383 | s.yamamoto@datatables.net
Thor Walton | Developer | $98,540 | New York | 8327 | t.walton@datatables.net
Finn Camacho | Support Engineer | $87,500 | San Francisco | 2927 | f.camacho@datatables.net
Serge Baldwin | Data Coordinator | $138,575 | Singapore | 8352 | s.baldwin@datatables.net
Zenaida Frank | Software Engineer | $125,250 | New York | 7439 | z.frank@datatables.net
Zorita Serrano | Software Engineer | $115,000 | San Francisco | 4389 | z.serrano@datatables.net
Jennifer Acosta | Junior JavaScript Developer | $75,650 | Edinburgh | 3431 | j.acosta@datatables.net
Cara Stevens | Sales Assistant | $145,600 | New York | 3990 | c.stevens@datatables.net
Hermione Butler | Regional Director | $356,250 | London | 1016 | h.butler@datatables.net
Lael Greer | Systems Administrator | $103,500 | London | 6733 | l.greer@datatables.net
Jonas Alexander | Developer | $86,500 | San Francisco | 8196 | j.alexander@datatables.net
Shad Decker | Regional Director | $183,000 | Edinburgh | 6373 | s.decker@datatables.net
Michael Bruce | JavaScript Developer | $183,000 | Singapore | 5384 | m.bruce@datatables.net
Donna Snider | Customer Support | $112,000 | New York | 4226 | d.snider@datatables.net
Name | Position | Salary | Office | Extn. | E-mail

- JavaScript
- HTML
- CSS
- Ajax
- Server-side script

The JavaScript shown below is used to initialise the table shown in this example:

`new DataTable('#example');`

In addition to the above code, the following JavaScript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

``

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.