Tuesday, January 19, 2010

Section 13.29. there are no Dumb Questions










13.29. there are no Dumb Questions



Q:

What about ordered lists? What can I do to change their style?

A:

You style ordered and unordered lists in the same way. Of course, an ordered list has a sequence of numbers or letters for markers, not bullets. Using CSS you can control whether an ordered lists' markers are decimal numbers, roman numerals, or alphabetic letters (like a, b, c) with the list-style-type property. Common values are decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman. Consult a CSS reference for more options (there are many).

Q:

How can I control the text wrap on lists? In other words, how can I control whether text wraps underneath the marker or just underneath the text?

A:

There's a property called list-style-position. If you set this property to "inside" then your text will wrap under the marker. If you set it to "outside" then it will wrap just under the text above it.

Q:

Are you sure that's right? That seems backwards.

A:

Yes, and here's what inside and outside really mean: if you set your line-style-position to "inside" then the marker is inside your list item and so text will wrap under it. If you set it to "outside", then the marker is outside your list item and so text will just wrap under itself. And, by "inside your item" we mean inside the border of the list item's box.


Wow, who would have known we could take my site this far when we started?


We're going to get Tess a Segway of her own so she can go with me on the rest of my Segway'n USA trip. See ya somewhere... and we'll BOTH be updating the Web page. Thanks for everything!



BULLET POINTS


  • XHTML tables are used to structure tabular data.

  • Use the HTML table elements, <table>, <tr>, <th>, and <td> together to create a table.

  • The <table> element defines and surrounds the entire table.

  • Tables are defined in rows, using the <tr> element.

  • Each row contains one or more data cells, defined with the <td> element.

  • Use the <th> element for data cells that are row or column headings.

  • Tables are laid out in a grid. Each row corresponds to a <tr>...</tr> row in your HTML, and each column corresponds to the <td>...</td> content within the rows.

  • You can provide additional information about your tables with the table summary attribute, and the <caption> element.

  • Table data cells can have padding, borders, and border spacing, which is the space between cells.

  • Just like you can control the padding, borders, and margins of elements, you can control the padding, borders, and border spacing of table cells with CSS.

  • The border-collapse property is a special CSS property for tables that allows you to combine cell borders into one border for a cleaner look.

  • You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties.

  • You can add color to your tables with the background-color property. Background color can be added to the entire table, to each row, or to a single data cell.

  • If you have no data for a data cell, put no content into the <td> element. You need to use a <td>...</td> element to maintain the alignment of the table, however.

  • If your data cell needs to span multiple rows or columns, you can use the rowspan or colspan attributes of the <td> element.

  • You can nest tables within tables by placing the <table> element and all its content inside a data cell.

  • Tables should be used for tabular data, not for laying out your pages. Use CSS positioning to create multi-column page layouts as we described in Chapter 12.

  • Lists can be styled with CSS just like any other element. There are a few CSS properties specific to lists, such as list-style-type and list-style-image.

  • list-style-type allows you to change the type of the marker used in your list.

  • list-style-image allows you to specify an image for your list marker.














No comments: