[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","layouts/app-shell",{"_258":-5,"_9":10},"routes/subjects.$subject.topics.$topic",{"_9":10,"_11":12,"_13":14,"_15":16},"guest",true,"subjectTitle","HTML for Beginners","topicTitle","Lists and Tables","questions",[17,18,19,20,21,22,23,24,25,26,27,28],{"_29":240,"_31":241,"_33":242,"_35":36,"_37":243,"_39":244,"_41":245},{"_29":222,"_31":223,"_33":224,"_35":36,"_37":225,"_39":226,"_41":227},{"_29":204,"_31":205,"_33":206,"_35":36,"_37":207,"_39":208,"_41":209},{"_29":186,"_31":187,"_33":188,"_35":36,"_37":189,"_39":190,"_41":191},{"_29":165,"_31":166,"_33":-5,"_35":-5,"_37":167,"_39":168,"_41":169},{"_29":147,"_31":148,"_33":149,"_35":36,"_37":150,"_39":151,"_41":152},{"_29":130,"_31":131,"_33":-5,"_35":-5,"_37":132,"_39":133,"_41":134},{"_29":112,"_31":113,"_33":114,"_35":36,"_37":115,"_39":116,"_41":117},{"_29":94,"_31":95,"_33":96,"_35":36,"_37":97,"_39":98,"_41":99},{"_29":76,"_31":77,"_33":78,"_35":36,"_37":79,"_39":80,"_41":81},{"_29":58,"_31":59,"_33":60,"_35":36,"_37":61,"_39":62,"_41":63},{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42},"id","cmuo4z22s020i20jx57y36zse","stem","The first two rows here have three cells each. The last row has four. What does the browser do?","codeBlock","\n \n \n \n

Name	Team	Score
Ada	Red	10
Ben	Blue	8	7

","codeLang","html","notes","## Rows with too many cells\n\nThe browser does **not** show an error. It just draws an uneven table.\n\n- **Too many cells:** the table becomes as wide as its longest row. The extra cell makes a new column that sticks out past all the other rows, so they now look short.\n\n```html\n\n \n \n \n

A	B	C
D	E
F	G	H	I

\n```\n\n**Tip:** for each row, add up the spaces it fills: each cell's `colspan`, plus any spaces taken by a `rowspan` from a row above. Every row should give the same total. An HTML validator (a tool that checks your code) will point out rows that do not match.","explanation","The browser makes the table as wide as its longest row. The last row has 4 cells, so the table gets 4 columns. The other rows only have 3 cells, so their fourth spot is left empty. Nothing is thrown away or moved. The number of cells in each row decides the number of columns, so keep them matching.","options",[43,44,45,46],{"_29":56,"_48":57,"_33":-5,"_50":51},{"_29":54,"_48":55,"_33":-5,"_50":10},{"_29":52,"_48":53,"_33":-5,"_50":51},{"_29":47,"_48":49,"_33":-5,"_50":51},"cmuo4z22y020m20jx72u1ofqm","text","It squashes \"8\" and \"7\" together under Score","isCorrect",false,"cmuo4z22x020l20jxt1ad3sr9","It moves \"7\" down onto a new row by itself","cmuo4z22v020k20jxf1r0yugf","It gives the whole table a fourth column; the first two rows have a blank space there","cmuo4z22u020j20jxjz75pq2s","It throws away the extra \"7\" and shows only three cells in that row","cmuo4z22k020d20jxhwdp1n3f","rowspan=\"2\" makes one cell as tall as two rows. This table has three columns. How many cells should the second row have so everything lines up?","\n \n \n \n \n \n \n \n \n

Monday

9am

Maths

","## Joining cells: rowspan\n\n- **`rowspan=\"n\"`** makes one cell as tall as `n` rows. It works on `` and ``. The default is 1.\n\n**How it changes the number of cells in a row:**\n- A cell with `rowspan=\"2\"` also takes a space in the **row below**. So the row below needs **one less** cell.\n\n```html\n\n \n \n \n \n \n \n \n \n \n

Ana	Lee	30
Ben	Kim

\n```\n\nRow 2 has 3 cells. Row 3 has only 2 cells, because the \"30\" from row 2 already fills its third space.\n\n**Common mistake:** forgetting that a `rowspan` from above already fills a space, and writing a full row anyway. The row then has one cell too many, and that cell sticks out into a new column.","\"Monday\" reaches down into row 2 and takes its first column. That leaves 2 columns free, so row 2 needs 2 cells. If you wrote 3, the extra cell would not fit and would stick out as a new fourth column. rowspan only takes one column's worth of space in each row it covers.",[64,65,66,67],{"_29":74,"_48":75,"_33":-5,"_50":51},{"_29":72,"_48":73,"_33":-5,"_50":51},{"_29":70,"_48":71,"_33":-5,"_50":10},{"_29":68,"_48":69,"_33":-5,"_50":51},"cmuo4z22r020h20jxe563a1y7","0, because the tall cell fills all of the next row","cmuo4z22p020g20jx8o04foew","2, because \"Monday\" already takes up the first spot in the second row","cmuo4z22o020f20jxwmy67rkg","1, because rowspan=\"2\" takes away two cells from the next row","cmuo4z22m020e20jx3tcpywhv","3, because every row in a three-column table needs three cells","cmuo4z22c020820jxq9i387gi","colspan=\"2\" makes one cell as wide as two columns. The first row has three cells. What does the second row look like?","\n \n \n

1	2	3
A

","## Joining cells: colspan\n\n- **`colspan=\"n\"`** makes one cell as wide as `n` columns. It works on `` and ``. The default is 1.\n\n**How it changes the number of cells in a row:**\n- In a table with 3 columns, each row normally has 3 cells. If one cell has `colspan=\"2\"`, it takes 2 spaces, so that row only needs **2** cells.\n\n```html\n\n \n \n \n \n \n \n \n \n \n

Name	Age
Ana	Lee	30

\n```\n\nRow 1 has 2 cells, but they fill 3 spaces (2 + 1).","The table has 3 columns. \"A\" uses colspan=\"2\", so it fills 2 of them. The row has no cell for column 3. The browser does not stretch \"A\" or make up a cell; it just leaves that spot empty. To fill the row you would add one more , or use colspan=\"3\".",[82,83,84,85],{"_29":92,"_48":93,"_33":-5,"_50":51},{"_29":90,"_48":91,"_33":-5,"_50":51},{"_29":88,"_48":89,"_33":-5,"_50":10},{"_29":86,"_48":87,"_33":-5,"_50":51},"cmuo4z22j020c20jxyt1e37hg","\"A\" covers all three columns, because the browser stretches it to fill the row","cmuo4z22h020b20jx8wxd6c6d","\"A\" covers the first two columns, and the space under \"3\" is left blank with no cell there","cmuo4z22g020a20jxnloeubw7","The browser hides the second row because it has the wrong number of cells","cmuo4z22e020920jxtx6d43nn","\"A\" stays in the first column only; colspan does nothing when a row is short","cmuo4z224020320jx2efe1v6s"," is the title of a table. , and hold the top rows, main rows and bottom rows. Which line is in the wrong spot?","\n \n \n \n \n \n \n \n \n \n \n

Shopping list
Item	Price
Milk	1.20
Total	1.20

","## Table sections: thead, tbody, tfoot and caption\n\n- `` is the table's **title**. It must be the **very first thing** inside ``. It helps everyone, and screen reader users most.\n- `` holds the **header rows** at the top.\n- `` holds the **main data rows**.\n- `` holds the **footer rows** at the bottom, like totals.\n- Put them in this order: ``, ``, ``.\n\n**Things to watch:** If `

`, `

` is not first inside ``, the HTML is wrong.","A

must be the very first child of , before any rows or row groups. After it come , then , then . Putting last, as here, is correct: it is the order you would read the table in.",[100,101,102,103],{"_29":110,"_48":111,"_33":-5,"_50":10},{"_29":108,"_48":109,"_33":-5,"_50":51},{"_29":106,"_48":107,"_33":-5,"_50":51},{"_29":104,"_48":105,"_33":-5,"_50":51},"cmuo4z22b020720jxw8985q5c","Line 3: ","cmuo4z229020620jxxqnbu1ly","Line 9: has to come before , or the total shows at the top","cmuo4z228020520jxr8b3p0bd","Line 2: has to go outside the table, just above it","cmuo4z226020420jx846od2cg","Line 5:

heading cells can only go in

has to come first inside , before ","cmuo4z21w01zy20jx6fhee8m1","In a table, is a row,

is a normal cell and

is a heading cell. What does scope=\"col\" on this

mean?","\n \n \n \n \n \n \n \n \n

Name	Age
Ada	36

","## The parts of a basic table: scope\n\n- `

` is a **header cell**, the label for a column or row. Browsers make it bold and centered.\n- **`scope`** on a `

` says what the header is a label for:\n - `scope=\"col\"`: labels the column below it\n - `scope=\"row\"`: labels the row beside it\n - `colgroup` / `rowgroup`: labels a group of columns or rows\n\n```html\n\n \n \n \n \n \n \n \n \n

Name	Score
Ana	92

\n```\n\n**Things to watch:** Without `scope`, a screen reader has to guess what each header labels in a big table.","scope says which cells a header cell is a label for. scope=\"col\" means the cells below it in its column. scope=\"row\" means the cells beside it in its row. Screen readers use this to say \"Age: 36\" instead of just \"36\". It does not change the size or look of the cell; stretching across columns is what colspan does.",[118,119,120,121],{"_29":128,"_48":129,"_33":-5,"_50":10},{"_29":126,"_48":127,"_33":-5,"_50":51},{"_29":124,"_48":125,"_33":-5,"_50":51},{"_29":122,"_48":123,"_33":-5,"_50":51},"cmuo4z223020220jxku7bl18m","The heading text is shown going down, one letter per line","cmuo4z221020120jxtsse9upg","The heading gets stretched across all the columns","cmuo4z21z020020jxzozxtabj","The heading names the cells to its right in the same row","cmuo4z21y01zz20jx0kaj5mhk","The heading names the cells under it in the same column, so \"Age\" is the label for \"36\"","cmuo4z21o01zt20jxdcrglne9","Why is it wrong to use a table just to place parts of a page side by side, like a menu next to the main text?","## Tables are only for data\n\n- Use a table when your data fits in rows and columns that belong together, like a timetable or a score chart.\n- **Do not use a table to lay out a page.** Screen readers (programs that read pages aloud for blind users) announce every table as data, saying things like \"row 2, column 3\". That is confusing when the table only places things on the screen. Layout tables are also hard to fit on phones. Use CSS grid or flexbox for layout instead.","HTML tags describe what content is. A says \"this is data laid out in rows and columns\". Screen readers read it that way, announcing rows and columns, which makes no sense for a page layout. Tables are also harder to adapt to small screens. Browsers will still show a layout table, and cells can hold links and images, but it is the wrong tool.",[135,136,137,138],{"_29":145,"_48":146,"_33":-5,"_50":51},{"_29":143,"_48":144,"_33":-5,"_50":10},{"_29":141,"_48":142,"_33":-5,"_50":51},{"_29":139,"_48":140,"_33":-5,"_50":51},"cmuo4z21v01zx20jxo58272fg","Table cells cannot hold links, pictures or headings, so parts of the page would go missing","cmuo4z21s01zw20jx4u3jcuh7","Browsers will not show a table that holds anything but numbers","cmuo4z21r01zv20jx5xcmsjiu","A table tells screen readers \"this is data in rows and columns\", so blind users hear confusing row and column info for things that are not data","cmuo4z21p01zu20jxz2wzxj6u","A page can only have one table, so using one for layout leaves none for data","cmuo4z21g01zo20jxossznpst","A

is a list of words and what they mean, like a mini dictionary. Which tag here holds the meaning of \"Kiwi\"?","

Kiwi: A small brown bird from New Zealand.; A green fruit with fuzzy skin.

","## Description lists\n\n- `

` holds the **word** (the term).\n- `

` holds the **meaning** (the description). Browsers indent it.\n- One word can have more than one meaning. Several words can also share one meaning.\n\n```html\n

HTML: The markup language for web page structure.
CSS: The language for styling web pages.

\n```\n\n**Things to watch:** Every `

` needs at least one `

` after it.","

is the term (the word being described).

is the description (what it means). One term can have several

descriptions, which is handy when a word has more than one meaning. So both

lines describe \"Kiwi\".",[153,154,155,156],{"_29":163,"_48":164,"_33":-5,"_50":51},{"_29":161,"_48":162,"_33":-5,"_50":10},{"_29":159,"_48":160,"_33":-5,"_50":51},{"_29":157,"_48":158,"_33":-5,"_50":51},"cmuo4z21m01zs20jxn59rx6n5","Only the first

; a word can only have one

","cmuo4z21l01zr20jxrpdnkll2","Neither: the meaning has to go inside the

, after the word","cmuo4z21j01zq20jxxulv6p95","Both

tags: one word can have more than one meaning","cmuo4z21i01zp20jxjz47bzym","The

, which means \"description text\"","cmuo4z21801zj20jx5kru13zn","A nested list is a list inside a list, used for sub-items. Which code puts the inner list in the right place?","## Lists inside lists\n\n- To put a list inside a list, place the new list **inside** an `
`, after the item's text.\n- You can mix kinds. A numbered list can go inside a bullet item, and a bullet list can go inside a numbered item.\n\n```html\n
\n
Fruit\n
\n
Apple
\n
Pear
\n
\n
\n
Vegetables
\n
\n```\n\n**Common mistake:** putting the inner list between two `
` tags instead of inside one. Closing `
` too early causes the same problem. The inner list must come before the ``.\n\n```html\n\n
\n
Fruit
\n
\n
Apple
\n
\n
\n```","A sub-list belongs to one item, so it goes inside that item's
. Putting a
straight inside another
breaks the rule that only
can be a direct child. An
on its own inside an
has no list around it. A second list after the first is not nested at all; it is just a separate list.",[170,171,172,173],{"_29":183,"_48":184,"_33":185,"_50":51},{"_29":180,"_48":181,"_33":182,"_50":51},{"_29":177,"_48":178,"_33":179,"_50":51},{"_29":174,"_48":175,"_33":176,"_50":10},"cmuo4z21f01zn20jx53ki6tnn","The inner list is inside the \"Fruit\" item, before
","
\n
Fruit\n
\n
Apple
\n
\n
\n
Bread
\n
","cmuo4z21e01zm20jxuscw2s1r","The inner list comes after the outer list has closed","
\n
Fruit
\n
Bread
\n
\n
\n
Apple
\n
","cmuo4z21c01zl20jxwn4o2gst","An
is put straight inside another
, with no inner
","
\n
Fruit\n
Apple
\n \n
Bread
\n
","cmuo4z21a01zk20jxnecjq7gu","The inner list sits straight inside the outer list, after the \"Fruit\" item","
\n
Fruit
\n
\n
Apple
\n
\n
Bread
\n
","cmuo4z20z01ze20jxjmkz86ny","A
makes a bullet list. Each item goes in an
tag. Which line breaks the rule about what can sit straight inside a
?","
\n
Apples
\n
Fruit on sale:
\n
Pears
\n
Plums
\n
","## Bullet lists and list items\n\n- `
` makes a **bullet list**. Use it when the order of the items does not matter.\n- `
` is one **item** in a list.\n\n**Rule:** the only tag allowed directly inside `
` or `
` is `
`.\n\n**Common mistake:** putting plain text, a `
`, a `
` or another list straight inside `
` or `
`. That breaks the rules of HTML.\n\n```html\n\n
\n Shopping\n
Milk
\n
\n```","A
or
may only have
tags directly inside it. Text like \"Fruit on sale:\" belongs either inside an
or outside the list, for example just before it. The browser will still show the page, but the HTML is invalid and screen readers may count the list items wrong.",[192,193,194,195],{"_29":202,"_48":203,"_33":-5,"_50":51},{"_29":200,"_48":201,"_33":-5,"_50":51},{"_29":198,"_48":199,"_33":-5,"_50":51},{"_29":196,"_48":197,"_33":-5,"_50":10},"cmuo4z21701zi20jx8hhygd9m","Line 3: only
tags may sit straight inside a
, so the
is not allowed there","cmuo4z21501zh20jxofomsz7b","Line 2: a bullet list must start with a heading, not an
","cmuo4z21301zg20jxquer0pt4","None: a
can hold any tag, and each one gets a bullet","cmuo4z21101zf20jxds0f2chy","Line 5: the last item must be closed with
on the same line","cmuo4z20s01z920jxpdlaor34","The type setting on a numbered list picks how it counts. What will you see next to each item here?","
\n
Introduction
\n
Method
\n
Results
\n
","## Setting for numbered lists: type\n\n- **`type`** picks the kind of marker:\n - `1`: numbers (the default)\n - `a`: small letters\n - `A`: capital letters\n - `i`: small Roman numerals (i, ii, iii)\n - `I`: capital Roman numerals (I, II, III)\n\n```html\n
\n
Option A
\n
Option B
\n
\n```\n\n**Things to watch:** These settings only work on `
`. They do nothing on `
`. If you only want a different look, use CSS (`list-style-type`).","type takes five values. \"1\" gives numbers, \"a\" and \"A\" give small and big letters, \"i\" and \"I\" give small and big Roman numbers. Case matters: \"i\" is lowercase Roman, \"I\" is uppercase. It has nothing to do with italic text.",[210,211,212,213],{"_29":220,"_48":221,"_33":-5,"_50":10},{"_29":218,"_48":219,"_33":-5,"_50":51},{"_29":216,"_48":217,"_33":-5,"_50":51},{"_29":214,"_48":215,"_33":-5,"_50":51},"cmuo4z20y01zd20jxr15tuezr","a, b, c (small letters)","cmuo4z20x01zc20jxmt7dh96d","1, 2, 3 in slanted text","cmuo4z20v01zb20jx1s5ftpsi","I, II, III (big Roman numbers)","cmuo4z20u01za20jxswls0p5p","i, ii, iii (small Roman numbers)","cmuo4z20l01z420jxdb2nwptp","reversed is an on/off setting: writing the word turns it on. What will this numbered list look like?","
\n
Bronze
\n
Silver
\n
Gold
\n
","## Setting for numbered lists: reversed\n\n- **`reversed`** makes the list count down, not up. It needs no value. Just write the word.\n\n```html\n
\n
Third place
\n
Second place
\n
First place
\n
\n```\n\n**Things to watch:** `reversed` on its own counts down to 1. A list of 3 items shows 3, 2, 1.","reversed only changes the numbers, not the order of the items. The items stay in the order you wrote them. The numbers count down instead of up, ending at 1. You do not need to give it a value; just writing reversed turns it on.",[228,229,230,231],{"_29":238,"_48":239,"_33":-5,"_50":51},{"_29":236,"_48":237,"_33":-5,"_50":10},{"_29":234,"_48":235,"_33":-5,"_50":51},{"_29":232,"_48":233,"_33":-5,"_50":51},"cmuo4z20r01z820jxu5rd8zkd","1. Gold, 2. Silver, 3. Bronze (the items swap places)","cmuo4z20p01z720jxya0j6zhb","3. Gold, 2. Silver, 1. Bronze (items and numbers both flip)","cmuo4z20o01z620jxo6fgdlbd","3. Bronze, 2. Silver, 1. Gold","cmuo4z20m01z520jxlffzi6n7","1. Bronze, 2. Silver, 3. Gold (reversed does nothing unless you write reversed=\"true\")","cmuo4z20d01yz20jxqq05i0zl","An
tag makes a numbered list. The start setting picks the first number. What numbers will you see next to these three items?","
\n
Crack the eggs
\n
Whisk them
\n
Pour into the pan
\n
","## Setting for numbered lists: start\n\nAn **attribute** is an extra setting written inside the opening tag.\n\n- **`start`** picks the number to begin at. Always write a normal number here, even if the list shows letters.\n\n```html\n
\n
Five
\n
Six
\n
\n```","start gives the number of the first item. The list then counts up by one as normal. So start=\"3\" gives 3, 4, 5. It does not skip items and it does not count down. Counting down is what the separate reversed attribute does.",[246,247,248,249],{"_29":256,"_48":257,"_33":-5,"_50":51},{"_29":254,"_48":255,"_33":-5,"_50":51},{"_29":252,"_48":253,"_33":-5,"_50":51},{"_29":250,"_48":251,"_33":-5,"_50":10},"cmuo4z20j01z320jx1elb6raw","3, 4, 5","cmuo4z20i01z220jxysuaeht3","1, 2, 3 (start only changes the first number, then it goes back to normal)","cmuo4z20g01z120jxdjsvm3gh","4, 5, 6 (start skips 3 numbers first)","cmuo4z20f01z020jx3vdj95yv","3, 2, 1 (start counts down from 3)","email"]