{CLICCA QUI PER SCOPRIRE COME INTEGRARE L'HEADER}

## Esempi strutture Tabelle

Accessibilità

Usare le tabelle esclusivamente per dati tabellari, utilizzando gli attributi alt e caption, summary, th, scope, tr e td; usare l'elemento `<caption>` per associare didascalie a tabelle di dati, usare l'attributo summary dell'elemento `<table>` per fornire una descrizione dei dati riportati nella tabella. Tutte le icone presenti nelle tabelle devono essere corredate di un testo alternativo che ne descriva la funzionalità. Assicurarsi che le informazioni veicolate dal colore siano disponibili anche in formato testuale.

Codice

Per l'utilizzo di funzionalità complesse come l'ordinamento delle righe, la paginazione, la scelta del numero di elementi da visualizzare ed i filtri viene utilizzata la libreria JQuery DataTables. La relativa documentazione si trova a questo link.
Per un corretto funzionamento é necessario includere le librerie: dataTables.bootstrap.min.css, jquery.dataTables.min.js, dataTables.bootstrap.min.js e dataTablesEdit.js.
L'attivazione delle funzionalità e la definizione dei componenti nelle tabelle DataTables sono da impostare in dataTablesEdit.js.

User Experience

Il tag `<caption>` deve essere nascosto aggiungendo la classe `sr-only` solo quando gli elementi aggiuntivi presenti nella tabella non permettono una corretta posizione della descrizione rispetto alla tabella. Solo in quel caso é da preferire il posizionamento della descrizione nel div precedente il tag `<table>`.

## Tabella semplice

    <div class="tabella">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <table id="tabella-base" class="table display tabella-base">
          <caption class="marginBottom">Inserire descrizione tabella qui</caption>
          <thead>
             <tr>
                <th><span class="thLabel">Colonna 1</span></th>
                <th><span class="thLabel">Colonna 2</span></th>
                <th><span class="thLabel">Colonna 3</span></th>
                <th><span class="thLabel">Colonna 4</span></th>
                <th></th>
             </tr>
          </thead>
          <tbody >
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" class="col-xs-8" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" class="col-xs-8" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" class="col-xs-8" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" class="col-xs-8" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
          </tbody>
       </table>
    </div>

### Titolo Tabella

Link

Inserire descrizione tabella qui
Colonna 1 | Colonna 2 | Colonna 3 | Colonna 4 |
--- | --- | --- | --- | ---
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |

## Tabella uno

    <div class="tabella">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <table id="tabella-1" class="table display">
          <caption class="marginBottom">Inserire descrizione tabella qui</caption>
          <thead>
             <tr>
                <th><span class="thLabel">Colonna 1</span></th>
                <th><span class="thLabel">Colonna 2</span></th>
                <th><span class="thLabel">Colonna 3</span></th>
                <th><span class="thLabel">Colonna 4</span></th>
                <th></th>
             </tr>
          </thead>
          <tbody >
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
                   <span class="fa fa-pencil"></span>
                   </a>
                   <a href="#" class="col-xs-4" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
                   <span class="fa fa-pencil"></span>
                   </a>
                   <a href="#" class="col-xs-4" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
                   <span class="fa fa-pencil"></span>
                   </a>
                   <a href="#" class="col-xs-4" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
                   <span class="fa fa-pencil"></span>
                   </a>
                   <a href="#" class="col-xs-4" title="Rimuovi elemento">
                   <span class="fa fa-trash-o"></span>
                   </a>
                </td>
             </tr>
          </tbody>
       </table>
    </div>

### Titolo Tabella

Link

Inserire descrizione tabella qui
Colonna 1 | Colonna 2 | Colonna 3 | Colonna 4 |
--- | --- | --- | --- | ---
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |

## Tabella con accordion

    <div class="tabella">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
       <table id="tabella-2" class="table display">
          <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
          <thead>
             <tr>
                <th><span class="thLabel">Colonna 1</span></th>
                <th><span class="thLabel">Colonna 2</span></th>
                <th><span class="thLabel">Colonna 3</span></th>
                <th></th>
             </tr>
          </thead>
          <tbody role="tablist" aria-multiselectable="true">
             <tr role="tab" aria-expanded="false" aria-controls="tabella-2" id="headingOne">
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
                   <button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
                   <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
                   </button>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
                   <button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
                   <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
                   </button>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
                   <button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
                   <span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
                   </button>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <span class="noPadding"></span>
                   <button class="tabIndex-input col-xs-3 fa fa-angle-down details-control" title="Espandi/Riduci la riga"></button>
                </td>
             </tr>
          </tbody>
       </table>
    </div>

### Titolo Tabella

Link
Inserire descrizione tabella qui

Inserire descrizione dei dati della tabella
Colonna 1 | Colonna 2 | Colonna 3 |
--- | --- | --- | ---
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum |

## Tabella con checkbox

    <div class="tabella">
       <h3 class="col-xs-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
       <table id="tabella-3" class="table display">
          <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
          <thead>
             <tr>
                <th scope="col" class="col-md-1">
                   <input type="checkbox" id="check_all">
                   <label for="check_all" title="Seleziona tutti">Seleziona tutti</label>
                </th>
                <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                <th scope="col" class="col-md-4"><span class="thLabel">Colonna 2</span></th>
                <th scope="col" class="col-md-4"><span class="thLabel">Colonna 3</span></th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td>
                   <input id="check_1" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_1" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
             <tr>
                <td>
                   <input id="check_2" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_2" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
             <tr>
                <td>
                   <input id="check_3" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_3" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
             <tr>
                <td>
                   <input id="check_19" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_19" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
             <tr>
                <td>
                   <input id="check_20" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_20" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
             <tr>
                <td>
                   <input id="check_21" type="checkbox" class="checkMe" title="Seleziona">
                   <label for="check_21" title="Seleziona questa riga"></label>
                </td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
             </tr>
          </tbody>
       </table>
       <div class="table-footer-action">
          <button type="submit" class="pull-right btn btn-primary">Bottone</button>
       </div>
    </div>

### Titolo Tabella

Link
Inserire descrizione tabella qui

Inserire descrizione dei dati della tabella
Seleziona tutti | Colonna 1 | Colonna 2 | Colonna 3
--- | --- | --- | ---
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum
| Lorem ipsum | Lorem ipsum | Lorem ipsum

## Tabella con elementi in download

    <div class="download-tab form-grey tabella">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <div class="col-xs-12 caption">Inserire descrizione tabella qui</div>
       <form class="row" id="tab-form-1">
          <table class="table dataTable col-xs-12" id="download-tab-id">
             <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
             <thead>
                <tr>
                   <th scope="col" class="col-xs-3"><span class="thLabel">Colonna 1</span></th>
                   <th scope="col" class="col-xs-8"><span class="thLabel">Colonna 2</span></th>
                   <th scope="col" class="no-icon col-xs-1"></th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td>Lorem ipsum</td>
                   <td>Lorem ipsum</td>
                   <td class="td-icons">
                      <a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
                   </td>
                </tr>
                <tr>
                   <td>Lorem ipsum</td>
                   <td>Lorem ipsum</td>
                   <td class="td-icons">
                      <a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
                   </td>
                </tr>
                <tr>
                   <td>Lorem ipsum</td>
                   <td>Lorem ipsum</td>
                   <td class="td-icons">
                      <a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
                   </td>
                </tr>
             </tbody>
          </table>
          <div class=" col-xs-12 baseFooter">
             <p>Lorem ipsum dolor sit amet <a href="#">Scarica</a></p>
          </div>
       </form>
    </div>

### Titolo Tabella

Link
Inserire descrizione tabella qui

Inserire descrizione dei dati della tabella
Colonna 1 | Colonna 2 |
--- | --- | ---
Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum |

Lorem ipsum dolor sit amet Scarica

## Tabella con icone e notifiche

    <div class="tabella notifiche-tab">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <table id="tabella-notifica" class="table dataTable">
          <caption class="marginBottom">Inserire descrizione tabella qui</caption>
          <thead>
             <tr>
                <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                <th scope="col" class="col-md-2"><span class="thLabel">Colonna 2</span></th>
                <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
                <th scope="col" class="col-md-2"><span class="thLabel">Colonna 4</span></th>
                <th class="col-md-2"></th>
             </tr>
          </thead>
          <tbody>
             <tr class="unreadMessage">
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" data-toggle="modal" data-target="#modale-1" title="Inserire suggerimento">
                      <div class="col-xs-5">
                         <span class="fa fa-file-text-o icon-wrapper">
                         <span class="badge">1</span>
                         </span>
                      </div>
                   </a>
                   <a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
                      <div class="col-xs-5">
                         <span class="fa fa-eur icon-wrapper">
                         <span class="badge">1</span>
                         </span>
                      </div>
                   </a>
                </td>
             </tr>
             <tr class="unreadMessage">
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" data-toggle="modal" data-target="#modale-1" title="Inserire suggerimento">
                      <div class="col-xs-5">
                         <span class="fa fa-file-text-o icon-wrapper">
                         <span class="badge">1</span>
                         </span>
                      </div>
                   </a>
                   <a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
                      <div class="col-xs-5">
                         <span class="fa fa-eur icon-wrapper">
                         <span class="badge">1</span>
                         </span>
                      </div>
                   </a>
                </td>
             </tr>
             <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td class="td-icons">
                   <a href="#" data-toggle="modal" data-target="#modale-1" title="inserire suggerimento">
                      <div class="col-xs-5">
                         <span class="fa fa-file-text-o icon-wrapper">
                         <span class="badge"></span>
                         </span>
                      </div>
                   </a>
                   <a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
                      <div class="col-xs-5">
                         <span class="fa fa-eur icon-wrapper">
                         <span class="badge"></span>
                         </span>
                      </div>
                   </a>
                </td>
             </tr>
          </tbody>
       </table>
       <!-- Modale 1-->
       <div class="modal fade" id="modale-1" tabindex="-1" role="dialog" aria-labelledby="titolo-idModalLista">
          <div class="vertical-alignment-helper">
             <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                   <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                      </button>
                      <div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
                   </div>
                   <div class="modal-body tabella">
                      <table class="table dataTable table-modal no-heading" title="Inserire descrizione qui">
                         <caption class="sr-only">Inserire descrizione modale</caption>
    					 <thead>
                            <tr>
    					       <th></th>
    						   <th></th>
    					    </tr>
    					 </thead>
                         <tbody>
                            <tr class="unreadMessage">
                               <td>Lorem ipsum dolor</td>
                               <td><a href="#" class="pull-right" title="Scarica .PDF">
                                  <span class="fa fa-file-pdf-o pdf"></span>
                                  </a>
                               </td>
                            </tr>
                            <tr>
                               <td>Lorem ipsum dolor</td>
                               <td><a href="#" class="pull-right" title="Scarica .PDF">
                                  <span class="fa fa-file-pdf-o pdf"></span>
                                  </a>
                               </td>
                            </tr>
                            <tr>
                               <td>Lorem ipsum dolor</td>
                               <td><a href="#" class="pull-right" title="Scarica .PDF">
                                  <span class="fa fa-file-pdf-o pdf"></span>
                                  </a>
                               </td>
                            </tr>
                            <tr>
                               <td>Lorem ipsum dolor</td>
                               <td><a href="#" class="pull-right" title="Scarica .PDF">
                                  <span class="fa fa-file-pdf-o pdf"></span>
                                  </a>
                               </td>
                            </tr>
                            <tr>
                               <td>Lorem ipsum dolor</td>
                               <td><a href="#" class="pull-right" title="Scarica .PDF">
                                  <span class="fa fa-file-pdf-o pdf"></span>
                                  </a>
                               </td>
                            </tr>
                         </tbody>
                      </table>
                   </div>
                   <div class="modal-footer">
                      <button type="button" class="btn btn-link pull-right lowerText">
                      Link
                      </button>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <!-- Modale 2 -->
       <div class="modal fade" id="modale-2" tabindex="-1" role="dialog" aria-labelledby="idTitoloTabella">
          <div class="vertical-alignment-helper">
             <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                   <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                      </button>
                      <div class="modal-title" id="idTitoloTabella">Titolo modale tabella</div>
                   </div>
                   <div class="modal-body">
                      <div class="tabella">
                         <table class="table tabella-base">
                            <caption class="sr-only">Inserire descrizione tabella qui</caption>
                            <thead>
                               <tr>
                                  <th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
                                  <th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
                                  <th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
                                  <th scope="col" class="col-md-2"></th>
                               </tr>
                            </thead>
                            <tbody >
                               <tr class="unreadMessage">
                                  <td>Dato 1</td>
                                  <td>Dato 2</td>
                                  <td>Dato 3</td>
                                  <td class="td-icons">
                                     <a href="#" title="Visualizza dettaglio">
                                     <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
                                     </a>
                                  </td>
                               </tr>
                               <tr>
                                  <td>Dato 1</td>
                                  <td>Dato 2</td>
                                  <td>Dato 3</td>
                                  <td class="td-icons">
                                     <a href="#" title="Visualizza dettaglio">
                                     <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
                                     </a>
                                  </td>
                               </tr>
                               <tr>
                                  <td>Dato 1</td>
                                  <td>Dato 2</td>
                                  <td>Dato 3</td>
                                  <td class="td-icons">
                                     <a href="#" title="Visualizza dettaglio">
                                     <span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
                                     </a>
                                  </td>
                               </tr>
                            </tbody>
                         </table>
                      </div>
                      <div class="modal-footer">
                         <button type="button" class="btn btn-link pull-right">
                         Link
                         </button>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>

### Titolo Tabella

Link

Inserire descrizione tabella qui
Colonna 1 | Colonna 2 | Colonna 3 | Colonna 4 |
--- | --- | --- | --- | ---
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | 1 1
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | 1 1
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |

Titolo modale lista

Inserire descrizione modale
Lorem ipsum dolor |
Lorem ipsum dolor |
Lorem ipsum dolor |
Lorem ipsum dolor |
Lorem ipsum dolor |

Titolo modale tabella

Inserire descrizione tabella qui
Colonna 1 | Colonna 2 | Colonna 3 |
--- | --- | --- | ---
Dato 1 | Dato 2 | Dato 3 |
Dato 1 | Dato 2 | Dato 3 |
Dato 1 | Dato 2 | Dato 3 |

## Tabella con status

    <div class="tabella status-tab">
       <h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
       <a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
       <div class="col-xs-12 caption marginBottom noPaddingLeft">Inserire descrizione tabella qui</div>
       <table id="tab-status" class="table display dataTable marginTop">
          <caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
          <thead>
             <tr>
                <th scope="col" class="col-xs-6"><span class="thLabel">Colonna 1</span></th>
                <th scope="col" class="col-xs-2"><span class="thLabel">Colonna 2</span></th>
                <th scope="col" class="col-xs-2"><span class="thLabel">Colonna 3</span></th>
                <th scope="col" class="col-xs-2"></th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 1
                   <span class="progress">
                   <span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
                      aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 2
                   <span class="progress">
                   <span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
                      aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 3
                   <span class="progress">
                   <span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
                      aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 4
                   <span class="progress">
                   <span class="progress-bar progress-bar-25" role="progressbar" aria-valuenow="25"
                      aria-valuemin="0" aria-valuemax="100" style="width:25%" title="Stato avanzamento: 15%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 5
                   <span class="progress">
                   <span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
                      aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 6
                   <span class="progress">
                   <span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
                      aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
             <tr>
                <td class="col-xs-6">Lorem ipsum</td>
                <td class="col-xs-2">Lorem ipsum</td>
                <td class="col-xs-2">Dato 7
                   <span class="progress">
                   <span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
                      aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
                   </span>
                   </span>
                </td>
                <td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
             </tr>
          </tbody>
       </table>
    </div>

### Titolo Tabella

Link
Inserire descrizione tabella qui

Inserire descrizione dei dati della tabella
Colonna 1 | Colonna 2 | Colonna 3 |
--- | --- | --- | ---
Lorem ipsum | Lorem ipsum | Dato 1 |
Lorem ipsum | Lorem ipsum | Dato 2 |
Lorem ipsum | Lorem ipsum | Dato 3 |
Lorem ipsum | Lorem ipsum | Dato 4 |
Lorem ipsum | Lorem ipsum | Dato 5 |
Lorem ipsum | Lorem ipsum | Dato 6 |
Lorem ipsum | Lorem ipsum | Dato 7 |

{CLICCA QUI PER SCOPRIRE COME INTEGRARE IL FOOTER}

INAIL sede centrale: P.le Pastore 6, 00144 Roma (RM) - P. IVA 00968951004

## Menu di servizio

- Responsabile della pubblicazione
- Avviso all'utenza
- Accessibilità
- Monitoraggio accessi
- Mappa del sito

Torna alla navigazione interna

## Menu in lingua

- Inglese
- Spagnolo
- Tedesco
- Francese

- Home (accesskey:h)
- Vai a Istituto (accesskey:i)
- Vai a Attività (accesskey:a)
- Vai a Atti e Documenti (accesskey:d)
- Vai a Comunicazione (accesskey:c)
- Vai a Servizi per Te (accesskey:t)
- Vai a Supporto (accesskey:s)

Torna alla navigazione interna