# 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 element suitable for that column.

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if found. The `orderCellsTop` option can be used to tell DataTables to use the top cell if you prefer.

The example shown below has two sets of grouped information, grouped by colspan in the header.

Name | HR Information | Contact
--- | --- | ---
Position | Salary | Office | Extn. | E-mail
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:

`$(document).ready(function () { $('#example').DataTable(); });`

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

- https://code.jquery.com/jquery-3.5.1.js
- ../../media/js/jquery.dataTables.js

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:

- ../../media/css/jquery.dataTables.css

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.