Tables
Web Basics — HTML & CSS Lesson 9 2:10 English narration · English + 中文 subtitles burned in
Chapters
Transcript
A table needs three tags nested inside each other, and getting the order right is most of the work.
表格需要三个互相嵌套的标签，而把顺序弄对，就是这里的大部分工作。
Table wraps the whole thing.
table 包住整个表格。
Inside it, t r is one row across the page.
在它里面，tr 是横向的一行。
And inside a row, t d is one cell in that row.
而在一行里面，td 是这一行里的一个单元格。
So the nesting goes table, then row, then cell — and a cell always lives inside a row, never directly inside the table.
所以嵌套顺序是：表格、行、单元格—— 单元格永远住在行里面，绝不会直接放在表格里。
That last point is the mistake this lesson is really about.
最后这一点，正是这一课真正要讲的那个错误。
Written out, a table looks like a wall of angle brackets, so it helps to see it beside the thing it produces.
写出来的表格看着像一堵尖括号砌成的墙， 所以把它和它生成的东西并排看会很有帮助。
Each line of source is one row of the grid.
源代码里的每一行，就是网格里的一行。
The cyan outline on the right shows where a t r begins and ends — everything inside one outline came from one line on the left.
右边那圈青色的轮廓，标出的正是一个 tr 从哪里开始、到哪里结束—— 一个轮廓里的所有东西，都来自左边的一行代码。
Read a table that way and it stops looking complicated.
这样去读表格，它就不再显得复杂了。
The top row of most tables names the columns, and those cells get a different tag.
大多数表格的第一行是列名，那些单元格用的是另一个标签。
Change the d to an h and you have a header cell.
把 d 改成 h，你就得到了一个表头单元格。
The browser draws it bold, but that is not the point — same as with strong and em, this is about meaning.
浏览器会把它画成粗体，但重点不在这儿—— 和 strong、em 一样，这关乎的是含义。
A screen reader uses these to tell a listener which column a value belongs to, which is the only way a table makes sense out loud.
屏幕阅读器用它来告诉听者某个值属于哪一列， 而这是表格被念出来时唯一能让人听懂的方式。
One rule keeps tables tidy: give every row the same number of cells.
有一条规则能让表格保持整齐：每一行的单元格数量要相同。
Leave one row one cell short and the grid gets a hole in it, which is at least easy to spot — a table shows its own bugs.
某一行少一个格子，网格上就会出现一个缺口， 这至少还算好发现——表格会把自己的 bug 显示出来。
Now the two tasks: build a table with two rows, each holding a cell, and then turn a cell into a header with t h.
现在做那两道题： 做一个有两行的表格，每行里放一个单元格， 然后用 th 把一个单元格变成表头。
Four things to take with you.
带走四点。
One: table wraps the whole thing.
第一：table 包住整个表格。
Two: t r is one row, and cells go inside it.
第二：tr 是一行，单元格放在它里面。
Three: t d is a data cell and t h is a header cell.
第三：td 是数据单元格，th 是表头单元格。
Four: give every row the same number of cells.
第四：每一行的单元格数量要相同。
Now build both tasks.
现在把两道题都做出来。