Table Editing

<table class="k-table" style="width: 769px; height: 178px;">
 <tbody>
 <tr style="height: 22.905%;" data-role="resizable">
 <td style="width: 12.5%;" data-role="resizable" colspan="2">Next Q Marketing
 Budget</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable" colspan="2">January
 </td>
 <td style="width: 12.5%; text-align: center;" colspan="2" data-role="resizable">February
 </td>
 <td style="width: 12.5%; text-align: center;" colspan="2">March</td>
 </tr>
 <tr style="height: 22.905%;" data-role="resizable">
 <td style="width: 12.5%;" data-role="resizable" rowspan="5">Campaign</td>
 <td style="width: 12.5%;" data-role="resizable"></td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Planned</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Actual</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Planned</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Actual</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Planned</td>
 <td style="width: 12.5%; text-align: center;">Actual</td>
 </tr>
 <tr style="height: 15.0838%;" data-role="resizable">
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Social Media</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">2000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">1850</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">2000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">2000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">2000</td>
 <td style="width: 12.5%; text-align: center;">2000</td>
 </tr>
 <tr style="height: 14.5251%;" data-role="resizable">
 <td style="width: 12.5%; text-align: center;" data-role="resizable">TV Ads</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">40 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">55 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">40
 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">40 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">-</td>
 <td style="width: 12.5%; text-align: center;">-</td>
 </tr>
 <tr style="height: 12.8492%;" data-role="resizable">
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Flyers</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">550</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">550</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">-&nbsp;</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">-</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">-</td>
 <td style="width: 12.5%; text-align: center;">-</td>
 </tr>
 <tr style="height: 11.7318%;">
 <td style="width: 12.5%; text-align: center;" data-role="resizable">Radio Ads</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">15 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">15 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">10 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">10 000</td>
 <td style="width: 12.5%; text-align: center;" data-role="resizable">5000</td>
 <td style="width: 12.5%; text-align: center;">5000</td>
 </tr>
 </tbody>
 </table>

Description

This demo presents the the table edtiting tools supported:

Table a wizard enables you to create a new table with different table and cell settings or modify the selected one;
Create table enables you to easily create a simple table by selecting the rows and columns in the dropdown;
Add row above/below adds a new row;
Add column left/right adds a new column;
Delete row/column deletes the selected row or column;
Merge cells horizontally merges the selected cell with the one on the left;
Merge cells vertically merges the selected cell with the one below;
Split cell horizontally/vertically splits a cell that has colspan or rowspan attribute (as a result of Merge cells command) and adds a new empty cell.

HTML5/JavaScript source

Also available for:

API Reference

table-editing.html
Widget configuration

Select widget to inspect

Editors

Layout

Navigation

Scheduling

Data Management

Media

Interactivity & UX

Framework

PDF

Conversational UI

Charts

Barcodes

Gauges

Diagrams & Maps

Editor

SASS Themes

LESS Themes

SASS Theme Builder

Table Editing

Description

HTML5/JavaScript source

Also available for:

Support & learning resources

Editor for other technologies