Research and Implementation of Browser Table Layout Algorithm

Refer to the table’s feature, the paper advances a kind of table model, and then introduces how to convert the table into the table model, and gives a table layout algorithm based on the table model and the characteristic of the table layout in an embedded browser. At last the paper emphatically introduces the table layout algorithm that can be used to resolve the nested table layout and prevent the data out-flow the table.


Introduction
Table is a common information carrier and it reflects the connections between various entities and their attributes brevity and visually [1]. Now most of the web pages are implemented by the table, most  browsers support table layout, but it is not a unified table layout algorithm. Traditional browsers like Internet  explorer, it usually takes two table layout algorithms: fixed table layout algorithm and dynamic table layout algorithm. Using fixed table algorithm can reduce the time needed for page layout, but it can't ensure that the data in the table do not overflow. Dynamic table layout algorithm can make the data in table overflow occurs with automatically adapt to the size of the window; it is in the table layout required for a long time. In general, for a given layout algorithm using static table, table the value of an attribute or dynamic table  layout algorithm. It is because of the traditional browser layout algorithm adopted the above table, so when the data in a table when the width of a given value is greater than the width of table, the table of data generally overflow occurs; When the table of the width of each column of a given value is greater than the sum of the table of the given value when the table is usually large [2,3]. Obviously table typesetting still exist many problems, we study how to achieve an effective table layout algorithm with the characteristics of the embedded system.

The Table Model
Table is a two-dimensional matrix structure; it consists of rows and columns. So you can use a twodimensional matrix structure to represent the table (array).  any table is available to represent the above table,  the nested table into the nested tables, just calculate a nested table formed by each of the TC after the transformation of nested tables in the row number, span, column number, the information such as the column span.

Table into a Table Model
Table is a hierarchical structure, and the trees can be very good this hierarchy, so the tree can be used in image representation of table structure [6][7]. Here is with tree structure to represent the table (nested tables and the nested table) image description: The tree node characteristics description: The Table (I) represent I node information is a table of information; Node Row (I) represent I represented by information is a line of information; Col (I) represent I node represents information is a column; TCT (I) node I represented by information is a TCT information; TC (I) node I represented by information is a TC information; The Child nodes (I) represent I children; P (a) is a collection of nodes. Table of tree denoted as follows: Tree (Table)=(D,R); P(Child (Table(i)))={Row(j),Child(i)=j,j D}; P(Child(Row(j)))={Col(k),Child(k)=j,k D}; P(Child(Col(k)))={TC(l),TCT(l),Child(k)=l,l D}; 3 P(Child(TCT(l)))={Row(m),Child(l)=m,m D}; P(Child(TC(l)))=φ; D represents the collection of data node tree; R represents relationship of each node in the tree. The above table tree can be seen table the definition of a child is composed of line information nodes table a summary said, line information children of a node is made up of said column information in a table node, and column information children of a node is made up of TC and TCT, TC information node is a leaf node, TCT information children of a node is made up of said line information nodes. So on, and eventually all leaf nodes have represent TC information, this is what we are looking for the TC, through tree traversal can get information on each node of the tree, so can easy to calculate each leaf node in the tree after the transformation the row number and column number generated by the new table, line span, column span and other information. Due to the tree can be converted into a binary tree, binary tree and convenient for tree traversal, before ask leaf node information can make the tree into a binary tree. Figure 2 below is in the table of the tree representation.

Key Data Structure Design
The browser table layout has three main data structures: Table, TableChild, TableSub. The number of columns and rows of Table storage table, the table contains the information such as table cell number and  Table pointer Table; TableChild to deposit a table cell information including the starting line   When the browser encounters <table> tag parsing generate TableSub structure, when faced <td> or <th> mark, generating TableChild structure added to the table and add data TableChild structure encountered </ table> tag When parsing the end of the table. Then the control element generates the table data storage structure information Sub, Sub width of each were calculated, and the final form of each Sub optimize the width and height.

Table Layout Algorithm
After parsing table, table cell structure are generated, and the same column width value of each cell of the table may not be the same, this time to generate the corresponding Sub structure to calculate the optimal value of each cell width of the table, the table cell corresponds with the same column Sub. If the same column of a table column span cell is greater than 1, then all the tables in the column corresponding Sub cell can be further broken down until after the breakdown of the various sub-Sub column span of 1.
After Sub structure generation, to get the ultimate width of the table, you must calculate the ultimate width of each Sub in the table. The ultimate value of Sub is mainly based on Sub's table cell ultimate value calculated, the algorithm is described as follows: If the width of the value given in Table cell, put the value of the dollar and the table where the maximum width compared Sub, Sub maximum width, whichever is the greater, the minimum value of the Sub take great value.
If the width value table cell is not given, then the calculation table where each sub-cell of Sub ultimate width, all the stored data traversing Sub tables million cell determine the ultimate width of the table. If the sub-Sub for a given value, repeat step one the above to calculate the ultimate width; if the Sub value is less than the width of the width of great data table element, from the data width as ultimate width of the Sub. Sub width for each child to accumulate, the resulting value is the width of a layer of sub maxima compared whichever maximum width as the Sub maxima. Sub ultimate width recursion levels.  Figure 3. Effect of table's display.

Conclusion
The hybrid table layout algorithm presented in this paper considered the characteristics of embedded system. For fixed table, it will be rearranged if the data of the