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 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.