-
Notifications
You must be signed in to change notification settings - Fork 46
/
Copy pathcsv-to-table-converter.html
203 lines (193 loc) · 9.11 KB
/
csv-to-table-converter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
---
title: Spreadsheets to HTML Table Converter | Developer Tools
layout: post
---
<html>
<head>
<!-- Meta tags common for website -->
{% include common-meta %}
<title>{{ page.title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="Free tool to convert CSV to HTML table online. We can easily convert spreadsheet cells to HTML table online. Autodetects Microsoft Excell & Google Spreadsheet formats." />
<meta name="keywords" content="online,tool,csv,html,table,convert,converter,spreadsheet,excell,google spreadsheet" />
<!-- CSS for the site theme -->
{% include theme-css %}
<!-- Annoying IE fixes -->
{% include ie-fixes %}
</head>
<body class="hold-transition skin-green sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<!-- header tag from theme -->
{% include theme-header %}
<!-- Sidebar for the whole website -->
{% include theme-sidebar %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row">
<!-- left column -->
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h1 class="box-title">Convert CSV Data To HTML Table Format</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="csv">CSV Data</label>
<textarea class="form-control" rows="10" id="csv" placeholder="Enter your CSV data here" autofocus></textarea>
</div>
</form>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-info" id="convert2table">Convert to Table</button>
</div>
</div>
</div>
<!-- /.box-footer -->
</div>
</div>
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Copy Your HTML Code From Here</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label for="json">HTML Table Code</label>
<textarea class="form-control" id="htmlTable" rows="10"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">HTML Formatted Table View</h3>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<div id="displayTable"></div>
</div>
<!-- /.box-body -->
</div>
</section>
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">About CSV to HTML Table Converter Tool</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>This is a free online tool to convert a CSV data into a HTML table. The CSV delimiter is detected automatically.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Can I Convert Google Spreadsheet Data To HTML Table Using This Tool?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Yes, you can simply copy and paste your Google spreadsheet data into the input field and we will convert it to HTML table format.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Can I Convert Microsoft Excell Data To HTML Table Using This Tool?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Yes. Isn't that cool! You can simply copy and paste your Microsoft excell spreadsheet data into the input field above and we will convert it to HTML table format.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What is a CSV?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>CSV or Comma Separated Values is a popular format to store large data tables. Tools like microsoft excell and many other software export data in this format. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why Convert From CSV to HTML table?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>CSV data can be difficult to display on HTML page. When you need to show the data on a HTML page you can convert it to HTML table tags.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What Data Can Be Converted On This Page?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>Any CSV compatible format data can be converted on this page. We smartly detect the delimiter in your data and format the HTML table for you.</p>
</div>
<!-- /.box-body -->
</div>
</section>
{% include addthis %}
</div>
<!-- /.content-wrapper -->
{% include theme-footer %}
</div>
<!-- ./wrapper -->
{% include theme-bottom-js %}
</body>
<script src="plugins/selectOnFocus/jquery.selectOnFocus.min.js"></script>
<script src="javascripts/papaparse.min.js"></script>
<script src="plugins/jsonTable/jquery.jsontotable.min.js"></script>
<script>
var parseconfig = {
header: false,
comments: "#"
};
$(document).ready(function() {
$("#convert2table").click(function() {
$("#htmlTable").empty();
$("#displayTable").empty();
var input = $("#csv").val();
if (input) {
var json = Papa.parse(input, parseconfig);
if (json) {
if (json.errors.length < 1) {
$.jsontotable(json.data, {
id: "#displayTable",
header: true
});
$("#htmlTable").val($("#displayTable").html());
$("#displayTable table").addClass("table table-striped");
} else {
if (json.errors) {
$("#htmlTable").val(json.errors[0].message + " on row " + json.errors[0].row);
} else {
$("#htmlTable").val("Invalid JSON data, unable to parse");
}
}
}
}
});
$("#csv").selectOnFocus();
$("#htmlTable").selectOnFocus();
$('#converters-category').addClass('active');
$('.markdown-body').attr('style', 'max-width:100%;');
});
</script>
</html>