GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Main page
  • Get MediaWiki
  • Get extensions
  • Tech blog
  • Contribute
  • User help
  • FAQ
  • Technical manual
  • Support desk
  • Communication
  • Developer portal
  • Code statistics
  • Community portal
  • Recent changes

This view

  • Original page
  • New address

GeezerVison is showing www.mediawiki.org — VisualEditor/Design/Table editor - MediaWiki

< VisualEditor | Design
(Redirected from VisualEditor/Table editor)
This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date.

This is an important development and should be put high in the priority list.

Table editing is difficult to do well. We want to do well.

Design Workflow

Goals

  • Allow users to add a new table and start adding content as quickly as possible.
  • Allow users to edit the table in context, without having to go into lots of menus.
  • 1. Selecting table from toolbar
    1. Selecting table from toolbar
  • 2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. Control in top left will allow a user to drag the table, or set table-level options
    2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. Control in top left will allow a user to drag the table, or set table-level options
  • 3. Hovering or clicking in a cell reveals controls for that row and column
    3. Hovering or clicking in a cell reveals controls for that row and column
  • 4. When a user clicks one of those controls, more controls are revealed. They can add a row above or below, delete the row, or click the cog icon for more options
    4. When a user clicks one of those controls, more controls are revealed. They can add a row above or below, delete the row, or click the cog icon for more options
  • 5. Hovering over a add row icon shows a darker blue line indication where the row will be
    5. Hovering over a add row icon shows a darker blue line indication where the row will be
  • 6. A user has added a new row
    6. A user has added a new row
  • 7. A user is editing a column and has clicked on the cog icon to see more options. The user can make it a header or make it sortable
    7. A user is editing a column and has clicked on the cog icon to see more options. The user can make it a header or make it sortable
  • 8. A variation of column/row controls, in which all actions are in one dropdown menu
    8. A variation of column/row controls, in which all actions are in one dropdown menu

Version 2

  • 1. Selecting table from toolbar
    1. Selecting table from toolbar
  • 2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. The small bars on the top and left allow users to access table editing options.
    2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. The small bars on the top and left allow users to access table editing options.
  • 3. Hovering on a row bar.
    3. Hovering on a row bar.
  • 4. Clicking on a row bar. This shows an arrow indication.
    4. Clicking on a row bar. This shows an arrow indication.
  • 5. Clicking on the arrow or any part of this bar opens the menu.
    5. Clicking on the arrow or any part of this bar opens the menu.
  • 6. A user can click and drag to select multiple columns or rows. They can access a menu to edit those multiple columns
    6. A user can click and drag to select multiple columns or rows. They can access a menu to edit those multiple columns
  • 7. Clicking on just one column
    7. Clicking on just one column

Other table editors

Service Author CSV/TSV Import MediaWiki Import MediaWiki Export Add rows/columns Remarks
Table Editor 2 Peder Skeidsvoll Yes Yes Yes
Wiki Table Editor golopot Yes Yes
TablesGenerator.com Yes Yes Yes
CK Editor Yes webpage extension
Wikia Table Editor uses CK Editor, appears to be disabled
TinyMCE Yes webpage extension
Google Docs n/a spreadsheet program
Aloha Editor Yes webpage extension, no live demo

DesiredPossible Functionality

  • Create table
  • Delete table
  • Resize table column widths
  • Rows
    • Toggle table cells/table headings
    • Add row before
    • Add row after
    • Duplicate row
    • Reorder rows (drag sort)
    • Delete row
  • Columns
    • Toggle table cells/table headings
    • Add column before
    • Add column after
    • Duplicate column
    • Reorder columns (drag sort)
    • Delete column
  • Cells
    • Toggle table cell/table heading
    • Merge right
    • Merge left
    • Merge up
    • Merge down
    • Split into rows
    • Split into columns
    • Change background color (highlight) (eg. w:World Series Most Valuable Player Award)
    • Right-, left-, and center-aligned content
  • Any element
    • edit style and attributes of the element
Retrieved from "https://www.mediawiki.org/w/index.php?title=VisualEditor/Design/Table_editor&oldid=4690997"
Category:
  • Pages kept for historical interest
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.