@表格设计@表格基本结构

文章目录

• @表格设计
• • html表格基础
  • 表格结构
  • • Basic description
    • • row
      • column
      • cell
      • more
    • 经典表格
    • Multiplication Table
  • 标题元素
  • 表格辅助设计工具
  • 理工科表格设计参考

@表格设计

html表格基础

• HTML Tables – Table Tutorial with Example Code (freecodecamp.org)
• HTML 表格基础 - 学习 Web 开发 | MDN (mozilla.org)
• HTML 表格高级特性和无障碍 - 学习 Web 开发 | MDN (mozilla.org)
• 样式化表格 - 学习 Web 开发 | MDN (mozilla.org)

表格结构

• Table (information) - Wikipedia
• 表格 (wikipedia.org)

Basic description

A table consists of an ordered arrangement of rows and columns. This is a simplified description of the most basic kind of table. Certain considerations follow from this simplified description:

row

• the term row has several common synonyms (e.g., record, k-tuple, n-tuple, vector);

column

• the term column has several common synonyms (e.g., field, parameter, property, attribute, stanchion);
• a column is usually identified by a name;
• a column name can consist of a word, phrase or a numerical index;

cell

• the intersection of a row and a column is called a cell.

more

• The elements of a table may be grouped, segmented, or arranged in many different ways, and even nested recursively. Additionally, a table may include

  • metadata

  • annotations,

  • a header

  • a footer other ancillary features.

经典表格

• School timetable (mdn.github.io)

  th-col:days th-row:periods	Mon	Tues	Wed	Thurs	Fri	Sat	Sun
  1st period	English			German	Dutch
  2nd period	English	English		German	Dutch
  3rd period		German		German	Dutch
  4th period		English		English	Dutch

Multiplication Table

• In multi-dimensional tables, each cell in the body of the table (and the value of that cell) relates to the values at the beginnings of the column (i.e. the header), the row, and other structures in more complex tables. This is an injective relation: each combination of the values of the headers row (row 0, for lack of a better term) and the headers column (column 0 for lack of a better term) is related to a unique cell in the table:
  • Column 1 and row 1 will only correspond to cell (1,1);
  • Column 1 and row 2 will only correspond to cell (2,1) etc.
• The first column often presents information dimension description by which the rest of the table is navigated.
  • This column is called “stub column”.
• Tables may contain three or multiple dimensions and can be classified by the number of dimensions.
• Multi-dimensional tables may have super-rows - rows that describe additional dimensions for the rows that are presented below that row and are usually grouped in a tree-like structure.
• This structure is typically visually presented with an appropriate number of white spaces in front of each stub’s label.
• In literature tables often present numerical values, cumulative statistics, categorical values, and at times parallel descriptions in form of text.
• They can condense large amount of information to a limited space and therefore they are popular in scientific literature in many fields of study.

标题元素

• <th> - HTML（超文本标记语言） | MDN (mozilla.org)

• 一个表格的第一行和第一列通常是表格的标题(header)

• 每一个header可以管住以行或者一列的内容

• 复杂表格

  • 对于复杂一些的表格,第一个单元格会比较特殊,可能包含了两个高级的标题(标题的标题)

  • 每个高级标题可以管住第一行或者第一列的低级标题

  • 例如上述的th-col:days可以管住第一行的标题(表示这些标题都是星期几的意思)

  • 又比如:

    • ×	1	2	3
      1	1	2	3
      2	2	4	6
      3	3	6	9

    • th-col:Y th-row:X	1	2	3	4
      1	1	1	1	0
      2	0	0	0	0
      4	1	1	0	0

• 简单表格

  • 如果每行或者列的标题含义足够明显(不至于产生歧义),那么第一个单元格可以置空

    • 	age	weight
      Jack	33	60
      Michael	35	66
      John	29	70

    • 不过您也可以在第一个单元格添加一个合适的实体名,本例中,可能是员工employee等

  • 更简单的,只有一侧标题

    • First name	Last name	Age
      Tinu	Elejogun	14
      Javier	Zapata	28
      Lily	McGarrett	18

    • X	1	3	9
      Y	2	4	8

表格辅助设计工具

• HTML Tables generator – TablesGenerator.com
• Graphic Designer - Create Amazing Graphic Design for Free | DesignCap

理工科表格设计参考

• <<Handbook of Geotechnical Investigation and Design Tables>>