Table in html with excel classes

Asked

Viewed 605 times

0

inserir a descrição da imagem aqui 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

I wonder if there are bootstrap classes or some other library that leaves tables with the same format as excel.

html5 css3 bootstrap-3

  • as well as equal to excel?

  • 1

    https://www.sitepoint.com/7-jquery-microsoft-excel-type-plugins/

  • default font of excel the black lines between rows and columns

1 answer

1


You can use this framework :

https://www.sitepoint.com/7-jquery-microsoft-excel-type-plugins/

It’s not necessarily just css classes like bootstrap, but it goes way beyond:

  • Resizable columns
  • Excel style headers that the user or programmer can hide
  • Can be displayed in zebra-Striped mode for better presentation
  • Data can be passed to initialize the spreadsheet
  • User or programmer can add and delete rows and columns
  • Unlike other sheets, show only how many rows and columns you need.
  • Add or delete them in your script as needed, or allow a user to do so.
  • Data can be deleted, copied and pasted from / to a single cell or an entire row within a spreadsheet or between multiple worksheets Keyboard interaction (Ctrl + C, Ctrl + V keys, Enter and Tab / Shift + Tab) Data can be recovered in a Two-dimensional string matrix Multiple sheets can be displayed on a fully exposed API page

An example of code made with it:

Instead of a table in your html, you will have to insert a DIV:


<div id = "contents" style = "margin-bottom: 20px">

The secret of how it will behave is in javascript code:

    $(document).ready(function () {  
         var aData = [ [ "Redwood City", "300", "true" ], [ "San Francisco", "100", "true" ], [ "San Jose", "500", "false" ] ];
         var oTable = $( "div#contents" ).spreadsheet( 
          { rows: 0, cols: 0, data: aData, zebra_striped: true, read_only: false, rowheader: true, colheader: true } );
         oTable.setNumeric( 1, true );
         $( "div#contents2" ).spreadsheet( 
          { rows: 10, cols: 10, data: null, zebra_striped: false, read_only: false, rowheader: true, colheader: true } );
    } );

Each parameter of this makes some kind of action when initializing the framework in the div "Contents"

For more information on parameters see in the documentation:

https://github.com/TanyaWebDesign/SpreadSheet

Remember that it depends on the jQuery framework.

inserir a descrição da imagem aqui

Browser other questions tagged html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.