How to modify Table Data, The easy way

##Tables, Tables Everywhere

Some of the Daihatsu wiki is using HTML tables, there is new support for tables coming via markdown-it which will make this process easier.

In the mean time we are stuck using HTML tables without investing money into a paid solution and it is our understanding that not everyone will be comfortable editing tables in the raw format, its pretty time consuming also.

Not all of the traditional HTML table formatting is available, a good example is shading every second row.

There is however a easier solution then working with the raw tables, this works for editing tables too.

###Building a new table?

You will be presented with a HTML Table generator.

  • If you wish to add rows or remove them you can do so via the Column and Row items

  • Simply click in each cell to create your table

You will notice below this editor that there is some block of HTML code.

  • To create your new table click the button

This will create your HTML table in the codebox.

  • Click the button

Please note that there is some information copied to the clip board that is not required.

  • Navigate to the section of the post you wish to place the table
  • Paste in the code, you will notice in the preview pane (if on a computer) that there is some “jibberish” this is a code to apply a style which is unsupported

It will appear similar to below:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-m1tb{font-weight:bold;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-2nhx{background-color:#9b9b9b;text-align:center;vertical-align:top}
.tg .tg-d1kj{background-color:#9b9b9b;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-6qw1{background-color:#c0c0c0;text-align:center;vertical-align:top}
.tg .tg-le8v{background-color:#c0c0c0;vertical-align:top}

Simply highlight from the <style> to the end </style> and delete this section.

  • Click Save to insert your table.

###Editing an existing table?

The process for editing an existing table is simular to creating a new one. If you understand HTML Tables then this process is probably more time consuming then neccessary to only make changes however to give the ability to all users you can perform the following.

  • Within the post you wish to modify click the edit icon

  • Once in the editor you are going to navigate to where the table exists

You will be looking for the start of the table which will appear like

and highlighting and copying all the way until the end

Unfortuneately the site that I noted for creating the tables does not import the table well at all so for modifying we are using another site.

  • Copy the table code to your clipboard and navigate to here

You will notice two window panes, the right hand pane is the code pain, paste your code into here.

You should see the table on the left hand side

  • Make required changes to the table in the left hand pane

  • Now simply highlight your code in the right hand pane same as you did from the thread

Noting at the end to avoid copying the spam, simply finish your copy at at </table>

  • Now simply overwrite the table data in the post you were editing and the new table will be posted