CHAPTER 16. TABLES 165
background-image:is used to place an image in a cell. We can also use a
foreground image with the![]()
tag.
border: is used to draw lines between cells. There is an old markup,
, that is deprecated but was used to automatically add
lines around and between cells. The border: mechanism is much more pow-
erful.
Exam Question 296(p.353): Is the table border= attribute deprecated?
Required Answer:yes
16.4 Merging Cells
Sometimes we want to merge cells. This is especially true for headings that
span more than one column. It can also be true for left-edge headings that
span more than one row.
Exam Question 297(p.353): What HTML attribute= is used to merge
table cells horizontally?
Required Answer:colspan=
Exam Question 298(p.353): What HTML attribute= is used to merge
table cells vertically?
Required Answer:rowspan=
Vertical Text:If we are spanning (merging) lots of rows, especially on the
left-hand edge of the table, we might want to use vertically oriented lettering.
This can be done using the transform: rotate() property. Transform has an
amazingly wide variety of options, but that is beyond the scope of what we
want to cover in this book.
The following CSS will rotate text -90 degrees (so the text reads from bottom
to top) if it is within a td cell that is the first child of its row. (Sadly it does
not also rotate your cursor, so copy-paste can be confusing.) 270deg means
the same as -90deg.
td:first-child { transform: rotate(-90deg); }
Exam Question 299(p.354): What CSS attribute lets us rotate some-
thing?
Acceptable Answer:transform: rotate();
