Algumas sugestões caso queira usar tabelas no Bitcointalk

[r_victory]

Original: Some suggestions if you want to use tables on Bitcointalk
Autor: 1miau

Tabelas são sempre úteis se você deseja compartilhar conteúdo em listas e melhorar a maneira como ele é exibido. Para cada linha, você pode listar as informações relacionadas em vez de postar cada informação em uma nova linha. Isso ajudará a manter sua postagem curta e clara, em vez de uma lista longa.

Comparação:


Estilo de formatação normal:

Criptomoeda: Bitcoin
Ticker: BTC
Preço: $10.900
Fornecimento circulante: 17.700.000 BTC
Capitalização de mercado: $193.000.000.000
Minerável?: sim

Criptomoeda: Ethereum
Ticker: ETH
Preço: $310
Fornecimento circulante: 106.600.000 ETH
Capitalização de mercado: $33.000.000.000
Minerável?: sim


Tabela:

Criptomoeda	Ticker	Preço (em $)	Fornecimento circulante	Capitalização de mercado (em $)	Minerável?
_________________	__________	____________	___________________	____________________	_____________
Bitcoin	BTC	10,900	17,700,000 BTC	193,000,000,000	sim
Ethereum	ETH	310	106,600,000 ETH	33,000,000,000	sim

Alguns bons layouts de tabela


Formatar tabelas pode ser um pouco complicado às vezes, aqui estão alguns dos meus layouts preferidos para manter a tabela clara e fácil de ler:




1. Usando ___ para o layout da sua tabela

xxx	xxx	xxx	xxx	xxx	xxx
_________________	_________________	_________________	_________________	_________________	_________________
xxx	xxx	xxx	xxx	xxx	xxx

Code:

[table]
[tr]
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[/tr]
[tr]
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[/tr]
[tr]
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td]
[/tr]
[/table]

O _____ garantirá que sua tabela tenha espaço suficiente entre as colunas. Se você quiser ter mais / menos espaço entre suas colunas, basta adicionar / excluir alguns _


Se você não os adicionar, sua tabela ficará assim:

Criptomoeda	Ticker	Preço (em $)	Fornecimento circulante	Capitalização de Mercado (em $)	minerável?
Bitcoin	BTC	10,900	17,700,000 BTC	193,000,000,000	sim
Ethereum	ETH	310	106,600,000 ETH	33,000,000,000	sim

(não muito bom na minha opinião)


Você pode adicionar quantas outras colunas à tabela apenas adicionando 1x

Code:

[td][b]xxx[/b][/td]

ao cabeçalho da tabela e

Code:

[td]xxx[/td] 

ao conteúdo da tabela. E não esqueça de adicionar

Code:

[td]__________________[/td]

se você adicionou uma nova coluna.




2. Usando | para o layout da sua tabela


Você também pode usar | para o layout da sua tabela:

xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|
xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|

Code:

[table]
[tr]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[/tr]
[tr]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[/tr]
[/table]

3. Usando ___ e | para o layout da sua tabela


Claro, você também pode usar ambos:

xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|
_________________	|	_________________	|	_________________	|	_________________	|	_________________	|	_________________	|
xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|

Code:

[table]
[tr]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[/tr]
[tr]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[/tr]
[tr]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[/tr]
[/table]

É possível combinar diferentes variantes como você preferir.
Se você tiver outras sugestões, pode postá-las aqui e eu criarei uma pequena coleção de estilos úteis de formatação de tabela.


Algumas informações adicionais:


Se você quiser incluir imagens na sua tabela, precisará deixar a primeira linha da tabela em branco se não usar ___ ou similar, pois se não adicionar ou não deixar a primeira linha da tabela em branco, sua imagem não será dimensionada corretamente. O mesmo se aplica ao texto, é claro. Mais informações aqui e aqui.


E se você quiser ler mais sobre tabelas (conceitos básicos explicados em detalhes), pode dar uma olhada aqui: Tutorial - Como criar Tabelas no Fórum BitcoinTalk.

Tradução

[alegotardo]

~snip~

Bacana, esses truques relamente ajudam para criar uma aparencia mais agradável ao resultado final.
Mas  eu acho que o problema da maioria nem é de deixar algo bem formatado, mas sim de entender como funciona os códigos para criar uma tabela básica mesmo.... o SMF realmente não é nada amigável para quem quer trabalhar com tabelas, custava ter uma interface gráfica para ajudar?

Queria só mencionar uma ferramenta (site) que ajuda bastante quem tem dificuldades com código ou só está com pressa para criar uma tabelinha sem se stressar com o bbcode...
dá uma olhada nisso, se achar interessante já deixa favoritado: https://tableconvert.com/pt/bbcode-generator

[r_victory]

Queria só mencionar uma ferramenta (site) que ajuda bastante quem tem dificuldades com código ou só está com pressa para criar uma tabelinha sem se stressar com o bbcode...
dá uma olhada nisso, se achar interessante já deixa favoritado: https://tableconvert.com/pt/bbcode-generator

Trabalhar com o BBCode em tópicos extensos é complicado, mesmo com tarefas mais simples, e traduzir é pior ainda. 

Eu já conhecia essa ferramenta. Ela agiliza bastante a tarefa de criar tabelas básicas; para quem não tem muita familiaridade com o código dos fóruns, é uma ótima opção.

[alegotardo]

Queria só mencionar uma ferramenta (site) que ajuda bastante quem tem dificuldades com código ou só está com pressa para criar uma tabelinha sem se stressar com o bbcode...
dá uma olhada nisso, se achar interessante já deixa favoritado: https://tableconvert.com/pt/bbcode-generator

Trabalhar com o BBCode em tópicos extensos é complicado, mesmo com tarefas mais simples, e traduzir é pior ainda. 

Eu já conhecia essa ferramenta. Ela agiliza bastante a tarefa de criar tabelas básicas; para quem não tem muita familiaridade com o código dos fóruns, é uma ótima opção.

Dei uma fuçada aqui, achei um script meia boca e com a ajuda da IA consegui algo até que interessante para usar com o tampermonkey, ele adiciona um "botão" do lado dos que já existem quando tu vai criar uma nova postagem, abrindo uma interface gráfica onde tu escolhe a uqantidade de linhas e colunas, aí é só reservar algumas para colocar o __ e |

Code:

// ==UserScript==
// @name         Bitcointalk BBCode Table Editor
// @namespace    https://example.com/
// @version      1.0
// @description  Small visual editor for BBCode tables
// @match        https://bitcointalk.org/*
// @grant        none
// @author       alegotardo + IA
// ==/UserScript==

(function () {
  'use strict';

  function getTextarea() {
    return document.forms.postmodify?.message || document.querySelector('textarea');
  }

  function insertAtCursor(textarea, text) {
    textarea.focus();
    const start = textarea.selectionStart ?? textarea.value.length;
    const end = textarea.selectionEnd ?? textarea.value.length;
    textarea.setRangeText(text, start, end, 'end');
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
    textarea.dispatchEvent(new Event('change', { bubbles: true }));
  }

  function esc(text) {
    return String(text || '')
      .replace(/\[/g, '[')
      .replace(/\]/g, ']');
  }

  function buildTable(rows, cols, values, header) {
    let out = '[table]\n';
    let i = 0;

    for (let r = 0; r < rows; r++) {
      out += '[tr]\n';
      for (let c = 0; c < cols; c++) {
        const value = esc(values[i++] || '');
        out += header && r === 0
          ? `[td][b]${value}[/b][/td]\n`
          : `[td]${value}[/td]\n`;
      }
      out += '[/tr]\n';
    }

    out += '[/table]';
    return out;
  }

  function createInput(value = '', isHeader = false) {
    const input = document.createElement('input');
    input.type = 'text';
    input.value = value;
    input.style.cssText = [
      'width:100%',
      'padding:4px 6px',
      'border:1px solid #999',
      'border-radius:3px',
      'font:12px Verdana,sans-serif',
      'box-sizing:border-box',
      isHeader ? 'font-weight:bold' : ''
    ].join(';');
    return input;
  }

  function openEditor(textarea) {
    const overlay = document.createElement('div');
    overlay.style.cssText = [
      'position:fixed',
      'inset:0',
      'background:rgba(0,0,0,.35)',
      'display:flex',
      'align-items:center',
      'justify-content:center',
      'z-index:999999'
    ].join(';');

    const box = document.createElement('div');
    box.style.cssText = [
      'background:#fff',
      'color:#222',
      'width:min(920px,95vw)',
      'max-height:90vh',
      'overflow:auto',
      'padding:12px',
      'border:1px solid #999',
      'border-radius:6px',
      'font:12px Verdana,sans-serif',
      'box-shadow:0 10px 30px rgba(0,0,0,.2)'
    ].join(';');

    box.innerHTML = `
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
        <strong>BBCode Table Editor</strong>
        <button type="button" id="bbte-close">Close</button>
      </div>

      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;">
        <label>Rows <input id="bbte-rows" type="number" min="1" value="3" style="width:60px;"></label>
        <label>Cols <input id="bbte-cols" type="number" min="1" value="3" style="width:60px;"></label>
        <label><input id="bbte-header" type="checkbox"> Header row</label>
        <button type="button" id="bbte-build">Build</button>
        <button type="button" id="bbte-insert">Insert</button>
      </div>

      <div id="bbte-grid-wrap" style="overflow:auto;"></div>
    `;

    overlay.appendChild(box);
    document.body.appendChild(overlay);

    const rowsInput = box.querySelector('#bbte-rows');
    const colsInput = box.querySelector('#bbte-cols');
    const headerInput = box.querySelector('#bbte-header');
    const gridWrap = box.querySelector('#bbte-grid-wrap');

    function getCurrentValues() {
      return [...gridWrap.querySelectorAll('input')].map(i => i.value);
    }

    function rebuildGrid() {
      const oldValues = getCurrentValues();
      const rows = Math.max(1, parseInt(rowsInput.value || '1', 10));
      const cols = Math.max(1, parseInt(colsInput.value || '1', 10));
      const header = headerInput.checked;

      gridWrap.innerHTML = '';

      const grid = document.createElement('div');
      grid.style.cssText = [
        'display:grid',
        `grid-template-columns:repeat(${cols}, minmax(120px, 1fr))`,
        'gap:6px'
      ].join(';');

      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const index = r * cols + c;
          grid.appendChild(createInput(oldValues[index] || '', header && r === 0));
        }
      }

      gridWrap.appendChild(grid);
    }

    box.querySelector('#bbte-build').onclick = rebuildGrid;

    headerInput.onchange = rebuildGrid;

    box.querySelector('#bbte-insert').onclick = function () {
      const rows = Math.max(1, parseInt(rowsInput.value || '1', 10));
      const cols = Math.max(1, parseInt(colsInput.value || '1', 10));
      const header = headerInput.checked;
      const values = getCurrentValues();
      const table = buildTable(rows, cols, values, header);

      insertAtCursor(textarea, '\n' + table + '\n');
      overlay.remove();
    };

    box.querySelector('#bbte-close').onclick = function () {
      overlay.remove();
    };

    overlay.addEventListener('click', function (e) {
      if (e.target === overlay) overlay.remove();
    });

    rebuildGrid();
  }

  function findTdButton() {
    return [...document.querySelectorAll('a[onclick]')].find(a =>
      a.getAttribute('onclick')?.includes("surroundText('[td]', '[/td]'")
    );
  }

  function addButton() {
    if (document.getElementById('bbcode-table-editor-btn')) return;

    const textarea = getTextarea();
    if (!textarea) return;

    const anchor = document.createElement('a');
    anchor.href = 'javascript:void(0);';
    anchor.id = 'bbcode-table-editor-btn';
    anchor.title = 'Open BBCode Table Editor';
    anchor.textContent = '[[TB]]';
    anchor.style.cssText = [
      'margin-left:4px',
      'font:12px Verdana,sans-serif',
      'text-decoration:none',
      'vertical-align:middle'
    ].join(';');

    anchor.onclick = function (e) {
      e.preventDefault();
      openEditor(textarea);
      return false;
    };

    const tdButton = findTdButton();

    if (tdButton) {
      tdButton.after(anchor);
    } else {
      textarea.parentNode.insertBefore(anchor, textarea);
    }
  }

  function init() {
    addButton();
    new MutationObserver(addButton).observe(document.body, {
      childList: true,
      subtree: true
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();