PageSourceSearch

https://tablextract.online/docs

html tablextract.online collected 2026-10-02 02:03:26 UTC 62,229 bytes, 1,607 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="csrf-token" content="cioBRUUMdpHPYxl35clmOwMnjk2KNkQ9rgXWVxGX">
8    <title>Documentation — Extract Tables from Websites</title>
9    <!-- Favicon -->
10    <link rel="icon" type="image/png" href="https://tablextract.online/assets/favicon.png">
11    <link rel="icon" type="image/png" sizes="32x32" href="https://tablextract.online/assets/favicon.png">
12
13    <!-- Apple Touch Icon -->
14    <link rel="apple-touch-icon" sizes="180x180" href="https://tablextract.online/assets/favicon.png">
15    <meta name="description" content="Learn how to extract tables from any website using TableXtract. Step-by-step guide, API docs, and best practices.">
16
17    <!-- Fonts -->
18    <link rel="preconnect" href="https://fonts.googleapis.com">
19    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20    <link
21        href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,[email protected],300;9..40,400;9..40,500;9..40,600&display=swap"
22        rel="stylesheet">
23
24    <!-- Styles -->
25    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
26    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
27
28    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 28-29
28
29    <script async src="https://www.googletagmanager.com/gtag/js?id=
29G-VJ13ZC2TFX
vendor: 16 bytes, lines 29-30
29"></script>
30    
30<script>
31        
vendor: 176 bytes, lines 31-38
31window.dataLayer = window.dataLayer || [];
32
33        function gtag() {
34            dataLayer.push(arguments);
35        }
36        gtag('js', new Date());
37
38        gtag('config', '
38G-VJ13ZC2TFX
vendor: 8 bytes, lines 38-39
38');
39    
39</script>
39
40    
41    <style>
42        /* ═══════════════════════════════════════════════
43           GLOBAL DESIGN TOKENS
44        ═══════════════════════════════════════════════ */
45        :root {
46            --tx-black: #08090a;
47            --tx-ink: #111318;
48            --tx-slate: #3a3d4a;
49            --tx-muted: #6b7080;
50            --tx-border: #e8eaf0;
51            --tx-surface: #f6f7fb;
52            --tx-white: #ffffff;
53
54            --tx-indigo: #4a3fff;
55            --tx-indigo-dk: #3530cc;
56            --tx-violet: #7c3aed;
57            --tx-accent: #00e5a0;
58
59            --tx-nav-h: 68px;
60            --tx-radius-sm: 8px;
61            --tx-radius-md: 14px;
62            --tx-radius-lg: 22px;
63            --tx-radius-xl: 32px;
64
65            --font-display: 'Syne', sans-serif;
66            --font-body: 'DM Sans', sans-serif;
67        }
68
69        *,
70        *::before,
71        *::after {
72            box-sizing: border-box;
73            margin: 0;
74            padding: 0;
75        }
76
77        html {
78            scroll-behavior: smooth;
79        }
80
81        body {
82            font-family: var(--font-body);
83            background: var(--tx-white);
84            color: var(--tx-ink);
85            -webkit-font-smoothing: antialiased;
86        }
87
88        /* ═══════════════════════════════════════════════
89           MAINTENANCE NOTICE BAR
90        ═══════════════════════════════════════════════ */
91        .tx-maintenance-bar {
92            background: #fff3cd;
93            color: #856404;
94            border-bottom: 1px solid #ffeeba;
95            text-align: center;
96            font-size: 0.875rem;
97            font-weight: 600;
98            padding: 0.6rem 1rem;
99            display: flex;
100            align-items: center;
101            justify-content: center;
102            gap: 8px;
103            position: relative;
104            z-index: 1001;
105        }
106
107        .tx-maintenance-bar i {
108            color: #d39e00;
109            font-size: 0.95rem;
110        }
111
112        /* ═══════════════════════════════════════════════
113           NAVBAR
114        ═══════════════════════════════════════════════ */
115        .tx-nav {
116            position: sticky;
117            top: 0;
118            left: 0;
119            right: 0;
120            z-index: 1000;
121            height: var(--tx-nav-h);
122            background: rgba(255, 255, 255, 0.88);
123            backdrop-filter: blur(18px) saturate(160%);
124            -webkit-backdrop-filter: blur(18px) saturate(160%);
125            border-bottom: 1px solid var(--tx-border);
126            display: flex;
127            align-items: center;
128            transition: background 0.3s, box-shadow 0.3s;
129        }
130
131        .tx-nav.scrolled {
132            background: rgba(255, 255, 255, 0.97);
133            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
134        }
135
136        .tx-nav .container {
137            display: flex;
138            align-items: center;
139            justify-content: space-between;
140            width: 100%;
141        }
142
143        /* Logo */
144        .tx-logo {
145            font-family: var(--font-display);
146            font-weight: 800;
147            font-size: 1.45rem;
148            letter-spacing: -0.03em;
149            text-decoration: none;
150            display: flex;
151            align-items: center;
152            gap: 8px;
153            color: var(--tx-ink);
154        }
155
156        .tx-logo .logo-icon {
157            width: 32px;
158            height: 32px;
159            background: linear-gradient(135deg, var(--tx-indigo) 0%, var(--tx-violet) 100%);
160            border-radius: 9px;
161            display: flex;
162            align-items: center;
163            justify-content: center;
164        }
165
166        .tx-logo .logo-icon i {
167            color: #fff;
168            font-size: 0.95rem;
169        }
170
171        .tx-logo span.accent {
172            background: linear-gradient(110deg, var(--tx-indigo), var(--tx-violet));
173            -webkit-background-clip: text;
174            background-clip: text;
175            color: transparent;
176        }
177
178        /* Nav links */
179        .tx-nav-links {
180            display: flex;
181            align-items: center;
182            gap: 0.2rem;
183            list-style: none;
184            margin-bottom: 0;
185        }
186
187        .tx-nav-links a {
188            font-size: 0.9rem;
189            font-weight: 500;
190            color: var(--tx-slate);
191            text-decoration: none;
192            padding: 0.45rem 0.95rem;
193            border-radius: var(--tx-radius-sm);
194            transition: color 0.18s, background 0.18s;
195        }
196
197        .tx-nav-links a:hover,
198        .tx-nav-links a.active {
199            color: var(--tx-indigo);
200            background: rgba(74, 63, 255, 0.06);
201        }
202
203        /* Dropdown */
204        .tx-dropdown {
205            position: relative;
206        }
207
208        .tx-dropdown-toggle {
209            display: flex;
210            align-items: center;
211            gap: 4px;
212            cursor: pointer;
213        }
214
215        .tx-dropdown-toggle i {
216            font-size: 0.7rem;
217            transition: transform 0.2s;
218        }
219
220        .tx-dropdown:hover .tx-dropdown-toggle i {
221            transform: rotate(180deg);
222        }
223
224        .tx-dropdown-menu {
225            position: absolute;
226            top: calc(100% + 0px);
227            left: 50%;
228            transform: translateX(-50%);
229            background: var(--tx-white);
230            border: 1px solid var(--tx-border);
231            border-radius: var(--tx-radius-md);
232            box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.14);
233            min-width: 220px;
234            padding: 0.5rem;
235            opacity: 0;
236            visibility: hidden;
237            pointer-events: none;
238            transition: opacity 0.18s, transform 0.18s;
239            transform: translateX(-50%) translateY(-6px);
240        }
241
242        .tx-dropdown:hover .tx-dropdown-menu {
243            opacity: 1;
244            visibility: visible;
245            pointer-events: auto;
246            transform: translateX(-50%) translateY(0);
247        }
248
249        .tx-dropdown-menu a {
250            display: flex;
251            align-items: center;
252            gap: 10px;
253            padding: 0.6rem 0.85rem;
254            border-radius: var(--tx-radius-sm);
255            font-size: 0.875rem;
256            color: var(--tx-slate);
257            text-decoration: none;
258            transition: background 0.15s, color 0.15s;
259        }
260
261        .tx-dropdown-menu a:hover {
262            background: var(--tx-surface);
263            color: var(--tx-indigo);
264        }
265
266        .tx-dropdown-menu a i {
267            font-size: 1rem;
268            color: var(--tx-muted);
269            width: 20px;
270            text-align: center;
271        }
272
273        /* Nav CTAs */
274        .tx-nav-actions {
275            display: flex;
276            align-items: center;
277            gap: 0.6rem;
278        }
279
280        .btn-tx-ghost {
281            font-family: var(--font-body);
282            font-size: 0.875rem;
283            font-weight: 500;
284            color: var(--tx-slate);
285            background: transparent;
286            border: 1px solid var(--tx-border);
287            border-radius: 40px;
288            padding: 0.5rem 1.2rem;
289            text-decoration: none;
290            transition: border-color 0.18s, color 0.18s, background 0.18s;
291            cursor: pointer;
292        }
293
294        .btn-tx-ghost:hover {
295            color: var(--tx-ink);
296            border-color: #c4c8d6;
297            background: var(--tx-surface);
298        }
299
300        .btn-tx-primary {
301            font-family: var(--font-body);
302            font-size: 0.875rem;
303            font-weight: 600;
304            color: #fff;
305            background: linear-gradient(110deg, var(--tx-indigo) 0%, var(--tx-violet) 100%);
306            border: none;
307            border-radius: 40px;
308            padding: 0.5rem 1.35rem;
309            text-decoration: none;
310            box-shadow: 0 4px 18px -6px rgba(74, 63, 255, 0.5);
311            transition: transform 0.18s, box-shadow 0.18s;
312            cursor: pointer;
313            display: inline-flex;
314            align-items: center;
315            gap: 6px;
316        }
317
318        .btn-tx-primary:hover {
319            color: #fff;
320            transform: translateY(-1px);
321            box-shadow: 0 8px 24px -8px rgba(74, 63, 255, 0.55);
322        }
323
324        .btn-tx-primary:active {
325            transform: scale(0.98);
326        }
327
328        /* Mobile hamburger */
329        .tx-hamburger {
330            display: none;
331            flex-direction: column;
332            justify-content: center;
333            gap: 5px;
334            width: 36px;
335            height: 36px;
336            background: none;
337            border: 1px solid var(--tx-border);
338            border-radius: var(--tx-radius-sm);
339            cursor: pointer;
340            padding: 6px 8px;
341        }
342
343        .tx-hamburger span {
344            display: block;
345            width: 100%;
346            height: 1.5px;
347            background: var(--tx-slate);
348            border-radius: 2px;
349            transition: transform 0.25s, opacity 0.25s;
350        }
351
352        .tx-hamburger.open span:nth-child(1) {
353            transform: translateY(6.5px) rotate(45deg);
354        }
355
356        .tx-hamburger.open span:nth-child(2) {
357            opacity: 0;
358        }
359
360        .tx-hamburger.open span:nth-child(3) {
361            transform: translateY(-6.5px) rotate(-45deg);
362        }
363
364        /* Mobile drawer */
365        .tx-mobile-menu {
366            display: none;
367            position: sticky;
368            top: var(--tx-nav-h);
369            left: 0;
370            right: 0;
371            background: var(--tx-white);
372            border-bottom: 1px solid var(--tx-border);
373            padding: 1rem 1.25rem 1.5rem;
374            z-index: 999;
375            box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.12);
376        }
377
378        .tx-mobile-menu.open {
379            display: block;
380        }
381
382        .tx-mobile-menu a {
383            display: block;
384            padding: 0.7rem 0.5rem;
385            font-size: 0.95rem;
386            font-weight: 500;
387            color: var(--tx-slate);
388            text-decoration: none;
389            border-bottom: 1px solid var(--tx-surface);
390        }
391
392        .tx-mobile-menu a:last-of-type {
393            border-bottom: none;
394        }
395
396        .tx-mobile-ctas {
397            display: flex;
398            gap: 0.6rem;
399            margin-top: 1rem;
400        }
401
402        .tx-mobile-ctas .btn-tx-ghost,
403        .tx-mobile-ctas .btn-tx-primary {
404            flex: 1;
405            text-align: center;
406            justify-content: center;
407        }
408
409        @media (max-width: 991px) {
410            .tx-nav-links,
411            .tx-nav-actions {
412                display: none;
413            }
414
415            .tx-hamburger {
416                display: flex;
417            }
418        }
419    </style>
420
421    <style>
422    /* ═══════════════════════════════════════════════════════════════════════
423       DOCUMENTATION PAGE — PREMIUM DESIGN
424    ═══════════════════════════════════════════════════════════════════════ */
425
426    .docs-hero {
427        background: linear-gradient(135deg, #0a0c10 0%, #0f1117 100%);
428        border-bottom: 1px solid rgba(74,63,255,0.2);
429        position: relative;
430    }
431
432    .docs-sidebar {
433        position: sticky;
434        top: 100px;
435        background: rgba(18, 20, 28, 0.6);
436        backdrop-filter: blur(10px);
437        border: 1px solid rgba(255,255,255,0.06);
438        border-radius: 20px;
439        padding: 24px;
440    }
441
442    .docs-sidebar-nav a {
443        display: flex;
444        align-items: center;
445        gap: 12px;
446        padding: 10px 16px;
447        color: #94a3b8;
448        text-decoration: none;
449        border-radius: 12px;
450        transition: all 0.2s;
451        font-size: 14px;
452        margin-bottom: 4px;
453    }
454
455    .docs-sidebar-nav a:hover {
456        background: rgba(74,63,255,0.1);
457        color: #a78bfa;
458    }
459
460    .docs-sidebar-nav a.active {
461        background: linear-gradient(135deg, rgba(74,63,255,0.15), rgba(192,132,252,0.08));
462        color: #a78bfa;
463        border-left: 2px solid #4a3fff;
464    }
465
466    .docs-content {
467        background: rgba(18, 20, 28, 0.4);
468        backdrop-filter: blur(10px);
469        border: 1px solid rgba(255,255,255,0.06);
470        border-radius: 24px;
471        padding: 48px;
472    }
473
474    .docs-content h2 {
475        font-size: 28px;
476        font-weight: 700;
477        color: #ffffff;
478        margin-top: 40px;
479        margin-bottom: 20px;
480        letter-spacing: -0.02em;
481    }
482
483    .docs-content h2:first-of-type {
484        margin-top: 0;
485    }
486
487    .docs-content h3 {
488        font-size: 20px;
489        font-weight: 600;
490        color: #e2e8f0;
491        margin-top: 32px;
492        margin-bottom: 16px;
493    }
494
495    .docs-content p {
496        color: #94a3b8;
497        line-height: 1.7;
498        margin-bottom: 20px;
499        font-size: 15px;
500    }
501
502    .code-block {
503        background: #0a0c10;
504        border: 1px solid rgba(74,63,255,0.2);
505        border-radius: 16px;
506        padding: 20px;
507        margin: 24px 0;
508        overflow-x: auto;
509        position: relative;
510    }
511
512    .code-block pre {
513        margin: 0;
514        font-family: 'Monaco', 'Menlo', monospace;
515        font-size: 13px;
516        color: #a78bfa;
517        line-height: 1.6;
518    }
519
520    .copy-btn {
521        position: absolute;
522        top: 12px;
523        right: 12px;
524        background: rgba(255,255,255,0.05);
525        border: 1px solid rgba(255,255,255,0.1);
526        border-radius: 8px;
527        padding: 6px 12px;
528        font-size: 11px;
529        color: #94a3b8;
530        cursor: pointer;
531        transition: all 0.2s;
532    }
533
534    .copy-btn:hover {
535        background: rgba(74,63,255,0.2);
536        color: #a78bfa;
537    }
538
539    .step-card {
540        display: flex;
541        gap: 20px;
542        margin-bottom: 32px;
543        padding: 24px;
544        background: rgba(255,255,255,0.02);
545        border-radius: 20px;
546        border: 1px solid rgba(255,255,255,0.05);
547    }
548
549    .step-number {
550        width: 48px;
551        height: 48px;
552        background: linear-gradient(135deg, rgba(74,63,255,0.2), rgba(192,132,252,0.1));
553        border-radius: 60px;
554        display: flex;
555        align-items: center;
556        justify-content: center;
557        font-size: 24px;
558        font-weight: 700;
559        color: #a78bfa;
560        flex-shrink: 0;
561    }
562
563    .plan-badge {
564        display: inline-flex;
565        align-items: center;
566        gap: 6px;
567        background: rgba(74,63,255,0.12);
568        border-radius: 40px;
569        padding: 4px 12px;
570        font-size: 11px;
571        font-weight: 600;
572        color: #a78bfa;
573        margin-right: 8px;
574    }
575
576    .plan-badge.free {
577        background: rgba(16,185,129,0.12);
578        color: #10b981;
579    }
580
581    .plan-badge.pro {
582        background: linear-gradient(135deg, rgba(74,63,255,0.2), rgba(192,132,252,0.1));
583        color: #a78bfa;
584    }
585
586    .plan-badge.enterprise {
587        background: rgba(245,158,11,0.12);
588        color: #f59e0b;
589    }
590
591    .info-note {
592        background: rgba(74,63,255,0.05);
593        border-left: 3px solid #4a3fff;
594        border-radius: 12px;
595        padding: 20px;
596        margin: 24px 0;
597    }
598
599    .warning-note {
600        background: rgba(245,158,11,0.05);
601        border-left: 3px solid #f59e0b;
602        border-radius: 12px;
603        padding: 20px;
604        margin: 24px 0;
605    }
606
607    .success-note {
608        background: rgba(16,185,129,0.05);
609        border-left: 3px solid #10b981;
610        border-radius: 12px;
611        padding: 20px;
612        margin: 24px 0;
613    }
614
615    .method-badge {
616        display: inline-flex;
617        align-items: center;
618        gap: 8px;
619        background: #0a0c10;
620        border: 1px solid rgba(74,63,255,0.3);
621        border-radius: 8px;
622        padding: 4px 12px;
623        font-family: monospace;
624        font-size: 12px;
625        font-weight: 600;
626        color: #a78bfa;
627    }
628
629    @media (max-width: 768px) {
630        .docs-content {
631            padding: 24px;
632        }
633        .step-card {
634            flex-direction: column;
635            gap: 16px;
636        }
637        .step-number {
638            width: 40px;
639            height: 40px;
640            font-size: 20px;
641        }
642    }
643</style>
644    
644<script type="text/javascript" class="flasher-js" nonce='6192c96f689dcfacc896083cc0cf73e1'>
645        (function(window, document) {
646            const merge = (first, second) => {
647                if (Array.isArray(first) && Array.isArray(second)) {
648                    return [...first, ...second.filter(item => !first.includes(item))];
649                }
650
651                if (typeof first === 'object' && typeof second === 'object') {
652                    for (const [key, value] of Object.entries(second)) {
653                        first[key] = key in first ? { ...first[key], ...value } : value;
654                    }
655                    return first;
656                }
657
658                return undefined;
659            };
660
661            const mergeOptions = (...options) => {
662                const result = {};
663
664                options.forEach(option => {
665                    Object.entries(option).forEach(([key, value]) => {
666                        result[key] = key in result ? merge(result[key], value) : value;
667                    });
668                });
669
670                return result;
671            };
672
673            const renderCallback = (options) => {
674                if(!window.flasher) {
675                    throw new Error('Flasher is not loaded');
676                }
677
678                window.flasher.render(options);
679            };
680
681            const render = (options) => {
682                if (options instanceof Event) {
683                    options = options.detail;
684                }
685
686                if (['interactive', 'complete'].includes(document.readyState)) {
687                    renderCallback(options);
688                } else {
689                    document.addEventListener('DOMContentLoaded', () => renderCallback(options));
690                }
691            };
692
693            const addScriptAndRender = (options) => {
694                const mainScript = "\/vendor\/flasher\/flasher.min.js?id=9a255a6680873c0d5fc3d394a2ba3195";
695
696                if (window.flasher || !mainScript || document.querySelector('script[src="' + mainScript + '"]')) {
697                    render(options);
698                } else {
699                    const tag = document.createElement('script');
700                    tag.src = mainScript;
701                    tag.type = 'text/javascript';
702                    tag.setAttribute('nonce', "6192c96f689dcfacc896083cc0cf73e1");
703                    tag.onload = () => render(options);
704
705                    document.head.appendChild(tag);
706                }
707            };
708
709            const addRenderListener = () => {
710                if (1 === document.querySelectorAll('script.flasher-js').length) {
711                    document.addEventListener('flasher:render', render);
712                    document.addEventListener('turbo:before-cache', () => {
713                        document.querySelectorAll('.fl-wrapper').forEach(el => el.remove());
714                    });
715                }
716
717                    document.addEventListener('livewire:navigating', () => {
718        document.querySelectorAll('.fl-wrapper').forEach(el => el.remove());
719    });
720            };
721
722            const options = [];
723            options.push({"envelopes":[],"scripts":[],"styles":[],"options":[],"context":{"envelopes_only":false,"csp_script_nonce":"6192c96f689dcfacc896083cc0cf73e1","csp_style_nonce":"d03933d656a89b3c7e7b914f77fc72ca"}});
724            /** {--FLASHER_REPLACE_ME--} **/
725            addScriptAndRender(mergeOptions(...options));
726            addRenderListener();
727        })(window, document);
728    </script>
728<script type="text/javascript" class="flasher-theme-livewire-js">
729    (function() {
730        window.addEventListener('flasher:theme:click', function(event) {
731            if (typeof Livewire === 'undefined') {
732                return;
733            }
734
735            const { detail } = event;
736            const { envelope } = detail;
737            const context = envelope.context || {};
738
739            if (!context.livewire?.id) {
740                return;
741            }
742
743            const { livewire: { id: componentId } } = context;
744            const component = Livewire.all().find(c => c.id === componentId);
745
746            if (!component) {
747                return;
748            }
749
750            Livewire.dispatchTo(component.name, 'theme:click', { payload: detail });
751
752            // Also dispatch theme-specific event
753            const plugin = envelope.metadata?.plugin || '';
754            let themeName = plugin;
755            if (plugin.startsWith('theme.')) {
756                themeName = plugin.replace('theme.', '');
757            }
758            if (themeName) {
759                Livewire.dispatchTo(component.name, 'theme:' + themeName + ':click', { payload: detail });
760            }
761        }, false);
762    })();
763</script>
763<script type="text/javascript" class="flasher-notyf-livewire-js">
764    (function() {
765        const events = ['flasher:notyf:click', 'flasher:notyf:dismiss'];
766
767        events.forEach(function(eventName) {
768            window.addEventListener(eventName, function(event) {
769                if (typeof Livewire === 'undefined') {
770                    return;
771                }
772
773                const { detail } = event;
774                const { envelope } = detail;
775                const context = envelope.context || {};
776
777                if (!context.livewire?.id) {
778                    return;
779                }
780
781                const { livewire: { id: componentId } } = context;
782                const component = Livewire.all().find(c => c.id === componentId);
783
784                if (!component) {
785                    return;
786                }
787
788                const livewireEventName = eventName.replace('flasher:', '').replace(':', ':');
789                Livewire.dispatchTo(component.name, livewireEventName, { payload: detail });
790            }, false);
791        });
792    })();
793</script>
793
794</head>
795
796<body class="">
797
798    <!-- ════════════════════════════════════
799         MAINTENANCE NOTICE
800    ════════════════════════════════════ -->
801    <div class="tx-maintenance-bar">
802        <i class="fas fa-tools"></i>
803        <span><strong>Notice:</strong> We are currently undergoing scheduled maintenance. Some services may be temporarily unavailable.</span>
804    </div>
805
806    <!-- ════════════════════════════════════
807         PRIMARY NAVIGATION
808    ════════════════════════════════════ -->
809    <nav class="tx-nav" id="txNav">
810        <div class="container">
811
812            
813            <a href="https://tablextract.online" class="tx-logo">
814                <img src="https://tablextract.online/assets/logo.webp" alt="TableXtract Logo" height="70px">
815            </a>
816
817            
818            <ul class="tx-nav-links">
819                <li>
820                    <div class="tx-dropdown">
821                        <a href="#" class="tx-dropdown-toggle">
822                            Product <i class="fas fa-chevron-down"></i>
823                        </a>
824                        <div class="tx-dropdown-menu">
825                            <a href="https://tablextract.online/html-table-extractor">
826                                <i class="fas fa-globe"></i> HTML Table Extractor
827                            </a>
828                            <a href="https://tablextract.online/image-table-extractor">
829                                <i class="fas fa-camera"></i> Image Table Extractor
830                            </a>
831                            <a href="https://tablextract.online/features-pdf">
832                                <i class="fas fa-file-pdf"></i> PDF Table Extractor
833                            </a>
834                        </div>
835                    </div>
836                </li>
837                <li>
838                    <a href="https://tablextract.online/extension" class="">
839                        Extension
840                    </a>
841                </li>
842                <li>
843                    <a href="https://tablextract.online/pricing" class="">
844                        Pricing
845                    </a>
846                </li>
847                <li>
848                    <a href="https://tablextract.online/docs" class="active">
849                        Docs
850                    </a>
851                </li>
852            </ul>
853
854            
855            <div class="tx-nav-actions">
856                                    <a href="https://tablextract.online/login" class="btn-tx-ghost">Log in</a>
857                    <a href="https://tablextract.online/register" class="btn-tx-primary">
858                        Start free <i class="fas fa-arrow-right" style="font-size:0.75rem"></i>
859                    </a>
860                            </div>
861
862            
863            <button class="tx-hamburger" id="txHamburger" aria-label="Toggle navigation">
864                <span></span><span></span><span></span>
865            </button>
866        </div>
867    </nav>
868
869    
870    <div class="tx-mobile-menu" id="txMobileMenu">
871        <a href="https://tablextract.online/html-table-extractor"><i class="fas fa-globe me-2 text-muted"></i> Website Table Extractor</a>
872        <a href="https://tablextract.online/image-table-extractor"><i class="fas fa-file-pdf me-2 text-muted"></i> PDF extraction</a>
873        <a href="https://tablextract.online/features-ocr"><i class="fas fa-camera me-2 text-muted"></i> Image Table Extractor</a>
874        <a href="https://tablextract.online/extension"><i class="fab fa-chrome me-2 text-muted"></i> Extension</a>
875        <a href="https://tablextract.online/docs"><i class="fas fa-book me-2 text-muted"></i> Docs</a>
876        <div class="tx-mobile-ctas">
877                            <a href="https://tablextract.online/login" class="btn-tx-ghost">Log in</a>
878                <a href="https://tablextract.online/register" class="btn-tx-primary">Start free →</a>
879                    </div>
880    </div>
881
882    
882<script>
883        const nav = document.getElementById('txNav');
884        const btn = document.getElementById('txHamburger');
885        const menu = document.getElementById('txMobileMenu');
886
887        window.addEventListener('scroll', () => {
888            nav.classList.toggle('scrolled', window.scrollY > 20);
889        });
890
891        btn.addEventListener('click', () => {
892            btn.classList.toggle('open');
893            menu.classList.toggle('open');
894        });
895    </script>
895
896
897<section class="docs-hero" style="padding: 80px 0 60px 0;">
898    <div class="container" style="max-width: 1280px; margin: 0 auto; padding: 0 24px;">
899        <div style="text-align: center; max-width: 720px; margin: 0 auto;">
900            <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(74,63,255,0.1); border: 1px solid rgba(74,63,255,0.2); border-radius: 100px; padding: 6px 16px; margin-bottom: 24px;">
901                <i class="fas fa-book-open" style="font-size: 12px; color: #a78bfa;"></i>
902                <span style="font-size: 13px; font-weight: 600; color: #a78bfa;">Documentation</span>
903            </div>
904
905            <h1 style="font-size: clamp(36px, 5vw, 52px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 20px 0; background: linear-gradient(135deg, #ffffff 30%, #a78bfa 70%, #c084fc 100%); -webkit-background-clip: text; background-clip: text; color: transparent;">
906                Extract Tables from Any Website
907            </h1>
908
909            <p style="font-size: 18px; color: #94a3b8; line-height: 1.6; max-width: 600px; margin: 0 auto;">
910                Learn how to extract structured table data from any webpage using our Chrome extension, API, or web interface.
911            </p>
912        </div>
913    </div>
914</section>
915
916
917<section style="padding: 40px 0 100px 0; background: #0a0c10;">
918    <div class="container" style="max-width: 1280px; margin: 0 auto; padding: 0 24px;">
919        <div class="row" style="display: flex; gap: 32px; flex-wrap: wrap;">
920
921            
922            <div class="col-lg-3" style="flex: 1; min-width: 260px;">
923                <div class="docs-sidebar">
924                    <div style="margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06);">
925                        <span style="font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 1px;">Getting Started</span>
926                    </div>
927                    <div class="docs-sidebar-nav">
928                        <a href="#overview" class="active">
929                            <i class="fas fa-info-circle" style="width: 20px;"></i>
930                            <span>Overview</span>
931                        </a>
932                        <a href="#method-1">
933                            <i class="fab fa-chrome" style="width: 20px;"></i>
934                            <span>Method 1: Chrome Extension</span>
935                        </a>
936                        <a href="#method-2">
937                            <i class="fas fa-globe" style="width: 20px;"></i>
938                            <span>Method 2: Web Interface</span>
939                        </a>
940                        <a href="#method-3">
941                            <i class="fas fa-code" style="width: 20px;"></i>
942                            <span>Method 3: API (Coming Soon)</span>
943                        </a>
944                        <a href="#plans">
945                            <i class="fas fa-tag" style="width: 20px;"></i>
946                            <span>Pricing Plans</span>
947                        </a>
948                        <a href="#faq">
949                            <i class="fas fa-question-circle" style="width: 20px;"></i>
950                            <span>FAQ</span>
951                        </a>
952                    </div>
953                </div>
954            </div>
955
956            
957            <div class="col-lg-9" style="flex: 3; min-width: 280px;">
958                <div class="docs-content">
959
960                    
961                    <h2 id="overview">Overview</h2>
962                    <p>
963                        TableXtract makes it incredibly easy to extract tables from any website. Whether you're scraping data for research,
964                        business intelligence, or personal projects, our tool handles the complexity so you can focus on analysis.
965                    </p>
966
967                    <div class="info-note">
968                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
969                            <i class="fas fa-star" style="color: #a78bfa;"></i>
970                            <strong style="color: #ffffff;">
970✨ Early Access Benefit</strong>
971                        </div>
972                        <p style="margin: 0; font-size: 14px;">
973                            During early access, <strong>all features are completely free</strong>. Users who join now keep free access forever!
974                        </p>
975                    </div>
976
977                    <p>
978                        TableXtract supports three methods for extracting website tables, each suited for different use cases:
979                    </p>
980
981                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0;">
982                        <div style="background: rgba(255,255,255,0.02); border-radius: 16px; padding: 20px;">
983                            <i class="fab fa-chrome" style="font-size: 28px; color: #a78bfa; margin-bottom: 12px; display: block;"></i>
984                            <div style="font-weight: 600; color: #ffffff; margin-bottom: 8px;">Chrome Extension</div>
985                            <div style="font-size: 13px; color: #64748b;">Best for one-off extractions and ad-hoc research</div>
986                        </div>
987                        <div style="background: rgba(255,255,255,0.02); border-radius: 16px; padding: 20px;">
988                            <i class="fas fa-globe" style="font-size: 28px; color: #a78bfa; margin-bottom: 12px; display: block;"></i>
989                            <div style="font-weight: 600; color: #ffffff; margin-bottom: 8px;">Web Interface</div>
990                            <div style="font-size: 13px; color: #64748b;">Upload URLs or files, download results</div>
991                        </div>
992                        <div style="background: rgba(255,255,255,0.02); border-radius: 16px; padding: 20px;">
993                            <i class="fas fa-code" style="font-size: 28px; color: #a78bfa; margin-bottom: 12px; display: block;"></i>
994                            <div style="font-weight: 600; color: #ffffff; margin-bottom: 8px;">REST API</div>
995                            <div style="font-size: 13px; color: #64748b;">Coming soon for programmatic access</div>
996                        </div>
997                    </div>
998
999                    
1000                    <h2 id="method-1">Method 1: Chrome Extension</h2>
1001                    <p>
1002                        The fastest way to extract tables. Works on any website, including those behind login walls.
1003                    </p>
1004
1005                    <div class="step-card">
1006                        <div class="step-number">1</div>
1007                        <div>
1008                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Install the Extension</h3>
1009                            <p style="margin: 0;">Visit the Chrome Web Store and add TableXtract to your browser.</p>
1010                            <div style="margin-top: 12px;">
1011                                <a href="https://tablextract.online/extension" class="category-tag" style="display: inline-flex; gap: 8px; text-decoration: none;">
1012                                    <i class="fab fa-chrome"></i> Add to Chrome
1013                                </a>
1014                            </div>
1015                        </div>
1016                    </div>
1017
1018                    <div class="step-card">
1019                        <div class="step-number">2</div>
1020                        <div>
1021                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Navigate to Any Website</h3>
1022                            <p style="margin: 0;">Go to any webpage that contains a table you want to extract.</p>
1023                        </div>
1024                    </div>
1025
1026                    <div class="step-card">
1027                        <div class="step-number">3</div>
1028                        <div>
1029                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Click the Extension Icon</h3>
1030                            <p style="margin: 0;">Click the TableXtract icon in your browser toolbar. The extension will automatically detect all tables on the page.</p>
1031                        </div>
1032                    </div>
1033
1034                    <div class="step-card">
1035                        <div class="step-number">4</div>
1036                        <div>
1037                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Select & Export</h3>
1038                            <p style="margin: 0;">Choose the table you want, select your export format (CSV, Excel, JSON), and download instantly.</p>
1039                        </div>
1040                    </div>
1041
1042                    <div class="success-note">
1043                        <div style="display: flex; align-items: center; gap: 10px;">
1044                            <i class="fas fa-check-circle" style="color: #10b981;"></i>
1045                            <strong style="color: #ffffff;">Pro Tip:</strong>
1046                            <span style="color: #94a3b8;">Use batch extraction to capture multiple tables from different pages in one session!</span>
1047                        </div>
1048                    </div>
1049
1050                    
1051                    <h2 id="method-2">Method 2: Web Interface</h2>
1052                    <p>
1053                        No installation needed. Use our web-based extractor for quick, one-off extractions.
1054                    </p>
1055
1056                    <div class="step-card">
1057                        <div class="step-number">1</div>
1058                        <div>
1059                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Go to Dashboard</h3>
1060                            <p style="margin: 0;">Log in to your TableXtract dashboard.</p>
1061                            
1062                        </div>
1063                    </div>
1064
1065                    <div class="step-card">
1066                        <div class="step-number">2</div>
1067                        <div>
1068                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Enter URL</h3>
1069                            <p style="margin: 0;">Paste the website URL containing the table you want to extract.</p>
1070                        </div>
1071                    </div>
1072
1073                    <div class="step-card">
1074                        <div class="step-number">3</div>
1075                        <div>
1076                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Click Extract</h3>
1077                            <p style="margin: 0;">Our AI will scan the page and identify all tables automatically.</p>
1078                        </div>
1079                    </div>
1080
1081                    <div class="step-card">
1082                        <div class="step-number">4</div>
1083                        <div>
1084                            <h3 style="margin: 0 0 8px 0; font-size: 18px;">Download Results</h3>
1085                            <p style="margin: 0;">Preview the extracted data and download in your preferred format.</p>
1086                        </div>
1087                    </div>
1088
1089                    <div class="code-block">
1090                        <button class="copy-btn" onclick="copyToClipboard(this, 'https://example.com/table-page')">Copy</button>
1091                        <pre><code>Example URL: https://en.wikipedia.org/wiki/List_of_countries_by_GDP</code></pre>
1092                    </div>
1093
1094                    
1095                    <h2 id="method-3">Method 3: REST API <span class="category-tag" style="background: rgba(245,158,11,0.12); color: #f59e0b;">Coming Soon</span></h2>
1096                    <p>
1097                        For developers who want to integrate table extraction into their applications. The API will be available for Pro and Enterprise plans.
1098                    </p>
1099
1100                    <div class="code-block">
1101                        <button class="copy-btn" onclick="copyToClipboard(this, 'POST https://api.tablextract.com/v1/extract')">Copy</button>
1102                        <pre><code>POST /v1/extract
1103Host: api.tablextract.com
1104Content-Type: application/json
1105Authorization: Bearer YOUR_API_KEY
1106
1107{
1108    "url": "https://example.com/page-with-table",
1109    "format": "csv",
1110    "options": {
1111        "detect_headers": true,
1112        "merge_cells": true
1113    }
1114}</code></pre>
1115                    </div>
1116
1117                    <div class="info-note">
1118                        <p style="margin: 0; font-size: 14px;">
1119                            <i class="fas fa-envelope" style="margin-right: 8px;"></i>
1120                            <strong>Want API access early?</strong>
1121                            <a href="https://tablextract.online/contact" style="color: #a78bfa;">Join the waitlist</a> and get notified when the API launches.
1122                        </p>
1123                    </div>
1124
1125                    
1126                    <h2 id="plans">Pricing Plans</h2>
1127                    <p>Choose the plan that fits your extraction needs. Early access users keep free access forever!</p>
1128
1129                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 32px 0;">
1130
1131                        
1132                        <div style="background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.2); border-radius: 20px; padding: 24px;">
1133                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
1134                                <span class="plan-badge free">Free</span>
1135                                <span style="font-size: 11px; color: #10b981;">Current Plan</span>
1136                            </div>
1137                            <div style="font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 8px;">$0</div>
1138                            <div style="font-size: 13px; color: #64748b; margin-bottom: 24px;">Keep forever for early users</div>
1139                            <ul style="margin: 0; padding-left: 20px; color: #94a3b8; font-size: 14px;">
1140                                <li style="margin-bottom: 8px;">✓ Unlimited extractions</li>
1141                                <li style="margin-bottom: 8px;">✓ All formats supported</li>
1142                                <li style="margin-bottom: 8px;">✓ Chrome extension</li>
1143                                <li style="margin-bottom: 8px;">✓ Web interface</li>
1144                                <li>✓ Email support</li>
1145                            </ul>
1146                        </div>
1147
1148                        
1149                        <div style="background: rgba(74,63,255,0.05); border: 1px solid rgba(74,63,255,0.2); border-radius: 20px; padding: 24px;">
1150                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
1151                                <span class="plan-badge pro">Pro</span>
1152                                <span style="font-size: 11px; color: #a78bfa;">Coming Soon</span>
1153                            </div>
1154                            <div style="font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 8px;">$3 <span style="font-size: 14px;">/month</span></div>
1155                            <div style="font-size: 13px; color: #64748b; margin-bottom: 24px;">For power users</div>
1156                            <ul style="margin: 0; padding-left: 20px; color: #94a3b8; font-size: 14px;">
1157                                <li style="margin-bottom: 8px;">✓ Everything in Free</li>
1158                                <li style="margin-bottom: 8px;">✓ Advanced AI model</li>
1159                                <li style="margin-bottom: 8px;">✓ Scheduled extractions</li>
1160                                <li style="margin-bottom: 8px;">✓ API access</li>
1161                                <li>✓ Priority support</li>
1162                            </ul>
1163                        </div>
1164
1165                        
1166                        <div style="background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.2); border-radius: 20px; padding: 24px;">
1167                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
1168                                <span class="plan-badge enterprise">Enterprise</span>
1169                                <span style="font-size: 11px; color: #f59e0b;">Coming Soon</span>
1170                            </div>
1171                            <div style="font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 8px;">Custom</div>
1172                            <div style="font-size: 13px; color: #64748b; margin-bottom: 24px;">For large organizations</div>
1173                            <ul style="margin: 0; padding-left: 20px; color: #94a3b8; font-size: 14px;">
1174                                <li style="margin-bottom: 8px;">✓ Everything in Pro</li>
1175                                <li style="margin-bottom: 8px;">✓ On-premise deployment</li>
1176                                <li style="margin-bottom: 8px;">✓ SSO & audit logs</li>
1177                                <li style="margin-bottom: 8px;">✓ SLA guarantee</li>
1178                                <li>✓ 24/7 dedicated support</li>
1179                            </ul>
1180                        </div>
1181                    </div>
1182
1183                    
1184                    <h2 id="faq">Frequently Asked Questions</h2>
1185
1186                    <div style="margin-top: 24px;">
1187                        <div style="margin-bottom: 28px;">
1188                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ What types of tables can TableXtract extract?</h3>
1189                            <p style="margin: 0;">All types! HTML tables, CSS grids, dynamic JavaScript tables, PDF tables embedded in websites, and more. Our AI detects table structures automatically.</p>
1190                        </div>
1191
1192                        <div style="margin-bottom: 28px;">
1193                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ Does it work on websites behind login?</h3>
1194                            <p style="margin: 0;">Yes! The Chrome extension works on any website you're logged into. The web interface supports basic authentication headers.</p>
1195                        </div>
1196
1197                        <div style="margin-bottom: 28px;">
1198                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ How accurate is the extraction?</h3>
1199                            <p style="margin: 0;">Our AI achieves <strong>99.2% accuracy</strong> for standard tables. Complex nested tables may require manual adjustment, but our preview tool helps you verify results.</p>
1200                        </div>
1201
1202                        <div style="margin-bottom: 28px;">
1203                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ Is there a limit on free usage?</h3>
1204                            <p style="margin: 0;">During early access, <strong>no limits!</strong> Extract as many tables as you need. Users who join now keep free access forever.</p>
1205                        </div>
1206
1207                        <div style="margin-bottom: 28px;">
1208                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ What export formats are supported?</h3>
1209                            <p style="margin: 0;">CSV, Excel (.xlsx), JSON, and Google Sheets (coming soon).</p>
1210                        </div>
1211
1212                        <div style="margin-bottom: 28px;">
1213                            <h3 style="font-size: 18px; margin-bottom: 8px;">❓ Can I extract multiple tables at once?</h3>
1214                            <p style="margin: 0;">Yes! The Chrome extension supports batch extraction. The API will support batch processing when launched.
1214</p>
1215                        </div>
1216                    </div>
1217
1218                    
1219                    <div style="margin-top: 48px; padding: 32px; background: linear-gradient(135deg, rgba(74,63,255,0.08), rgba(192,132,252,0.04)); border-radius: 24px; text-align: center;">
1220                        <i class="fas fa-headset" style="font-size: 36px; color: #a78bfa; margin-bottom: 16px; display: inline-block;"></i>
1221                        <h3 style="font-size: 20px; font-weight: 600; color: #ffffff; margin-bottom: 12px;">Still have questions?</h3>
1222                        <p style="color: #94a3b8; margin-bottom: 24px;">Our team is here to help you get the most out of TableXtract.</p>
1223                        <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
1224                            <a href="https://tablextract.online/contact" style="background: linear-gradient(135deg, #4a3fff, #7c3aed); color: white; padding: 12px 28px; border-radius: 60px; text-decoration: none; font-weight: 600;">
1225                                Contact Support
1226                            </a>
1227                            <a href="/cdn-cgi/l/email-protection#41323431312e3335013520232d243935332022356f222e2c" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; padding: 12px 28px; border-radius: 60px; text-decoration: none; font-weight: 500;">
1228                                <span class="__cf_email__" data-cfemail="4635333636293432063227242a233e32342725326825292b">[email&#160;protected]</span>
1229                            </a>
1230                        </div>
1231                    </div>
1232
1233                </div>
1234            </div>
1235        </div>
1236    </div>
1237</section>
vendor: 110 bytes, lines 1237-1239
1237
1238
1239<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1239<script>
1240function copyToClipboard(btn, text) {
1241    navigator.clipboard.writeText(text).then(function() {
1242        var originalText = btn.innerHTML;
1243        btn.innerHTML = 'Copied!';
1244        setTimeout(function() {
1245            btn.innerHTML = originalText;
1246        }, 2000);
1247    });
1248}
1249
1250// Active link highlighting on scroll
1251document.querySelectorAll('.docs-sidebar-nav a').forEach(link => {
1252    link.addEventListener('click', function(e) {
1253        document.querySelectorAll('.docs-sidebar-nav a').forEach(l => l.classList.remove('active'));
1254        this.classList.add('active');
1255    });
1256});
1257</script>
1257
1258
1259<!-- ════════════════════════════════════
1260     GLOBAL FOOTER
1261════════════════════════════════════ -->
1262<style>
1263    /* ─── Footer Design Tokens (inherits from header) ─── */
1264    .tx-footer {
1265        background: #08090a;
1266        color: #a8adb8;
1267        font-family: var(--font-body, 'DM Sans', sans-serif);
1268        -webkit-font-smoothing: antialiased;
1269    }
1270
1271    .tx-footer-top {
1272        padding: 80px 0 60px;
1273        border-bottom: 1px solid rgba(255,255,255,0.07);
1274    }
1275
1276    /* Brand column */
1277    .ft-brand-logo {
1278        font-family: var(--font-display, 'Syne', sans-serif);
1279        font-weight: 800;
1280        font-size: 1.5rem;
1281        letter-spacing: -0.03em;
1282        color: #fff;
1283        text-decoration: none;
1284        display: flex;
1285        align-items: center;
1286        gap: 10px;
1287        margin-bottom: 1.1rem;
1288    }
1289
1290    .ft-brand-logo .logo-icon {
1291        width: 34px; height: 34px;
1292        background: linear-gradient(135deg, #4a3fff 0%, #7c3aed 100%);
1293        border-radius: 10px;
1294        display: flex; align-items: center; justify-content: center;
1295        flex-shrink: 0;
1296    }
1297
1298    .ft-brand-logo .logo-icon i { color: #fff; font-size: 1rem; }
1299
1300    .ft-brand-logo .accent {
1301        background: linear-gradient(110deg, #7b72ff, #c084fc);
1302        -webkit-background-clip: text;
1303        background-clip: text;
1304        color: transparent;
1305    }
1306
1307    .ft-tagline {
1308        font-size: 0.9rem;
1309        color: #6b7080;
1310        line-height: 1.6;
1311        max-width: 240px;
1312        margin-bottom: 1.5rem;
1313    }
1314
1315    /* Social icons */
1316    .ft-social {
1317        display: flex;
1318        gap: 0.6rem;
1319    }
1320
1321    .ft-social a {
1322        width: 36px; height: 36px;
1323        background: rgba(255,255,255,0.05);
1324        border: 1px solid rgba(255,255,255,0.08);
1325        border-radius: 10px;
1326        color: #6b7080;
1327        display: flex;
1328        align-items: center;
1329        justify-content: center;
1330        text-decoration: none;
1331        font-size: 0.95rem;
1332        transition: background 0.18s, color 0.18s, border-color 0.18s;
1333    }
1334
1335    .ft-social a:hover {
1336        background: rgba(74,63,255,0.18);
1337        color: #8b83ff;
1338        border-color: rgba(74,63,255,0.3);
1339    }
1340
1341    /* Link columns */
1342    .ft-col-title {
1343        font-family: var(--font-display, 'Syne', sans-serif);
1344        font-size: 0.75rem;
1345        font-weight: 700;
1346        letter-spacing: 0.1em;
1347        text-transform: uppercase;
1348        color: rgba(255,255,255,0.35);
1349        margin-bottom: 1.1rem;
1350    }
1351
1352    .ft-links {
1353        list-style: none;
1354        padding: 0; margin: 0;
1355    }
1356
1357    .ft-links li { margin-bottom: 0.65rem; }
1358
1359    .ft-links a {
1360        font-size: 0.875rem;
1361        font-weight: 400;
1362        color: #6b7080;
1363        text-decoration: none;
1364        transition: color 0.15s;
1365        display: inline-flex;
1366        align-items: center;
1367        gap: 6px;
1368    }
1369
1370    .ft-links a:hover { color: #ffffff; }
1371
1372    .ft-links .link-badge {
1373        display: inline-block;
1374        font-size: 0.65rem;
1375        font-weight: 700;
1376        letter-spacing: 0.04em;
1377        padding: 2px 7px;
1378        border-radius: 20px;
1379        background: rgba(74,63,255,0.2);
1380        color: #8b83ff;
1381        border: 1px solid rgba(74,63,255,0.25);
1382        line-height: 1.4;
1383    }
1384
1385    /* Newsletter strip */
1386    .ft-newsletter {
1387        background: rgba(255,255,255,0.03);
1388        border: 1px solid rgba(255,255,255,0.07);
1389        border-radius: 18px;
1390        padding: 1.5rem 1.75rem;
1391        display: flex;
1392        align-items: center;
1393        justify-content: space-between;
1394        gap: 1.5rem;
1395        flex-wrap: wrap;
1396    }
1397
1398    .ft-newsletter-text strong {
1399        display: block;
1400        font-size: 0.95rem;
1401        font-weight: 600;
1402        color: #fff;
1403        margin-bottom: 2px;
1404    }
1405
1406    .ft-newsletter-text span {
1407        font-size: 0.82rem;
1408        color: #6b7080;
1409    }
1410
1411    .ft-newsletter-form {
1412        display: flex;
1413        gap: 0.5rem;
1414        flex: 1;
1415        max-width: 360px;
1416        min-width: 220px;
1417    }
1418
1419    .ft-newsletter-form input {
1420        flex: 1;
1421        background: rgba(255,255,255,0.06);
1422        border: 1px solid rgba(255,255,255,0.1);
1423        border-radius: 40px;
1424        padding: 0.55rem 1.1rem;
1425        font-size: 0.875rem;
1426        color: #fff;
1427        outline: none;
1428        transition: border-color 0.18s;
1429        font-family: var(--font-body, 'DM Sans', sans-serif);
1430    }
1431
1432    .ft-newsletter-form input::placeholder { color: #4a5060; }
1433    .ft-newsletter-form input:focus { border-color: rgba(74,63,255,0.5); }
1434
1435    .ft-newsletter-form button {
1436        font-family: var(--font-body, 'DM Sans', sans-serif);
1437        font-size: 0.85rem;
1438        font-weight: 600;
1439        color: #fff;
1440        background: linear-gradient(110deg, #4a3fff 0%, #7c3aed 100%);
1441        border: none;
1442        border-radius: 40px;
1443        padding: 0.55rem 1.25rem;
1444        cursor: pointer;
1445        white-space: nowrap;
1446        transition: opacity 0.18s, transform 0.15s;
1447    }
1448
1449    .ft-newsletter-form button:hover { opacity: 0.88; transform: translateY(-1px); }
1450
1451    /* Bottom bar */
1452    .tx-footer-bottom {
1453        padding: 1.5rem 0;
1454        display: flex;
1455        align-items: center;
1456        justify-content: space-between;
1457        flex-wrap: wrap;
1458        gap: 1rem;
1459    }
1460
1461    .ft-legal {
1462        font-size: 0.8rem;
1463        color: #3f4351;
1464    }
1465
1466    .ft-legal a {
1467        color: #3f4351;
1468        text-decoration: none;
1469        transition: color 0.15s;
1470        margin-left: 1.2rem;
1471    }
1472
1473    .ft-legal a:hover { color: #8b83ff; }
1474
1475    .ft-status {
1476        display: inline-flex;
1477        align-items: center;
1478        gap: 6px;
1479        font-size: 0.78rem;
1480        color: #3f4351;
1481        text-decoration: none;
1482    }
1483
1484    .ft-status-dot {
1485        width: 7px; height: 7px;
1486        background: #00e5a0;
1487        border-radius: 50%;
1488        box-shadow: 0 0 0 3px rgba(0,229,160,0.15);
1489        animation: pulse-dot 2.4s ease-in-out infinite;
1490    }
1491
1492    @keyframes pulse-dot {
1493        0%, 100% { box-shadow: 0 0 0 3px rgba(0,229,160,0.15); }
1494        50%       { box-shadow: 0 0 0 6px rgba(0,229,160,0.0); }
1495    }
1496
1497    @media (max-width: 768px) {
1498        .tx-footer-top { padding: 56px 0 48px; }
1499        .ft-newsletter { flex-direction: column; align-items: flex-start; }
1500        .ft-newsletter-form { max-width: 100%; min-width: unset; width: 100%; }
1501        .tx-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
1502    }
1503</style>
1504
1505<footer class="tx-footer">
1506    <div class="container">
1507        <div class="tx-footer-top">
1508            <div class="row g-5">
1509
1510                
1511                <div class="col-lg-4 col-md-12">
1512                    <a href="https://tablextract.online" class="ft-brand-logo">
1513                                    <img src="https://tablextract.online/assets/logo.webp"  alt="TableXtract Logo" height="70px !important">
1514
1515                    </a>
1516                    <p class="ft-tagline">AI-powered table intelligence. Extract anywhere, export everywhere.</p>
1517                    <div class="ft-social">
1518                        <a href="#" aria-label="Twitter / X"><i class="fab fa-x-twitter"></i></a>
1519                        <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
1520                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
1521                        <a href="#" aria-label="Discord"><i class="fab fa-discord"></i></a>
1522                    </div>
1523                </div>
1524
1525                
1526                <div class="col-lg-2 col-sm-6 col-6">
1527                    <p class="ft-col-title">Product</p>
1528                    <ul class="ft-links">
1529                        <li><a href="https://tablextract.online/features-web">Web extraction</a></li>
1530                        <li>
1531                            <a href="https://tablextract.online/features-pdf">PDF tables</a>
1532                        </li>
1533                        <li><a href="https://tablextract.online/features-ocr">Image OCR</a></li>
1534                        <li>
1535                            <a href="https://tablextract.online/extension">
1536                                Chrome extension
1537                                <span class="link-badge">Free</span>
1538                            </a>
1539                        </li>
1540                        
1541                    </ul>
1542                </div>
1543
1544                
1545                <div class="col-lg-2 col-sm-6 col-6">
1546                    <p class="ft-col-title">Resources</p>
1547                    <ul class="ft-links">
1548                        <li><a href="https://tablextract.online/docs">Documentation</a></li>
1549                        
1550                        <li><a href="https://tablextract.online/changelog">Changelog</a></li>
1551                        
1552                    </ul>
1553                </div>
1554
1555                
1556                <div class="col-lg-2 col-sm-6 col-6">
1557                    <p class="ft-col-title">Company</p>
1558                    <ul class="ft-links">
1559                        <li><a href="https://tablextract.online/about">About</a></li>
1560                        <li><a href="https://tablextract.online/contact">Contact</a></li>
1561                        
1562                        
1563                    </ul>
1564                </div>
1565
1566                
1567                <div class="col-lg-2 col-sm-6 col-6">
1568                    <p class="ft-col-title">Legal</p>
1569                    <ul class="ft-links">
1570                        <li><a href="https://tablextract.online/privacy">Privacy policy</a></li>
1571                        <li><a href="https://tablextract.online/terms">Terms of use</a></li>
1572                        <li><a href="https://tablextract.online/refund">Refund policy</a></li>
1573                        
1574                    </ul>
1575                </div>
1576
1577            </div>
1578
1579            
1580            <div class="ft-newsletter mt-5">
1581                <div class="ft-newsletter-text">
1582                    <strong>Stay in the loop</strong>
1583                    <span>Product updates, tips & no spam.</span>
1584                </div>
1585                
1586            </div>
1587        </div>
1588
1589        
1590        <div class="tx-footer-bottom">
1591            <div class="ft-legal">
1592                © 2026 TableXtract. All rights reserved.
1593                
1594            </div>
1595            <a href="" class="ft-status">
1596                <span class="ft-status-dot"></span>
1597                All systems operational
1598            </a>
1599        </div>
1600    </div>
1601</footer>
1602
1603
1604<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
vendor: 1 bytes, line 1604
1604
1605<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"2bbecc7a461448189bfd9a1689b322bd","r":1,"spa":2}' crossorigin="anonymous"></script>
1605
1606</body>
1607</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.