CHAPTER 10

Formatting Tables and Forms

Using Tables the Right Way

HTML and XHTML have a LOT of tags dedicated to building a table

If you have only three columns and three rows, you have nine unique HTML tags in operation

Using class identifiers saves a lot of trouble

VISIT: Bring on the Tables

Styling Tables

Because tables possess several type of tags, you need to know WHICH tags to style

Applying PADDING to a <table> tag has no effect Apply PADDING to a table header or a table cell.

td, th (padding: 10px;) You can control the padding (spacing) for each

edge If you insert an image in a table cell as a

background, and notice unwanted white space, set the image’s display property to “block” Image White Space in a Table

Adjusting Vertical and Horizontal Alignment

To control a content’s position within a table cell, use the text-align and vertical-align properties text-align controls horizontal positioning

left, right, center, and justify Remember, it is an inherited property Very handy for the <th> tag as browsers

usually center align the text. Table cells also have a height

browsers usually align content vertically in the middle of a table cell

Vertical-Align Property

The vertical-align property has four values top, baseline, middle, or bottom

top = pushes content to the top of the cell middle = centers content bottom = pushes the bottom of the content to

the bottom of the cell baseline = Works like the top property, except

the browser aligns the baseline of the first line of text in each cell in a row (great for perfectionists)

The vertical-align property is not inherited

Creating Borders

Applying the border property to a <table> tag, outlines the table, not the individual cells

Applying the border property to a <td> tag, leaves you with a visible gap between the cells (the lines appear as double lines)

To control this issue, you need to understand the <table> tag’s cell spacing attribute and the CSS border-collapse property

Controlling the Space Between Table Cells

Unless instructed, browsers separate table cells by 2px

It is very noticeable when you apply a border to the cell

CSS gives you the border-spacing property to control this, but since IE (all versions) doesn’t support the border-spacing property, use the table’s cell-spacing property.

Border-Collapse Property

Either Insert spacing

<table cellspacing=“10px”> Eliminate spacing

table {border-collapse: collapse;} If you eliminate spacing, the border property

doubles up (bottom of one cell with the top of the cell underneath it)

The best option is to use the border-collapse property Accepts two values: separate and collapse Collapse eliminates spaces and double borders

Styling Rows and Columns

Adding color to every other row in a table has no magic CSS wand. You would apply a .class to every other row you

wanted to either color or insert an background image.

Adding color or an image to a column is easier, but trickier Use the <colgroup> or <col> tags

one <col> tag for each column in a table and apply either a class or ID

only two properties work with these tags, width and background.

Setting a Width

<colgroup> tag groups several columns together

When setting a width to this tag, the browser automatically applies the specified width to each column in the group.

Keep in mind, backgrounds for columns appear under table cells, so if you set a background color for a cell, the table’s background will not be seen

Styling Forms

Forms are one of the primary methods visitors use to interact with a web site. join a mailing list search a database of products update personal profiles

There is no reason your FORM has to appear like all other forms on the web

Unfortunately, results can be mixed as browsers do not support styling for forms in a uniform manner—they vary greatly

Styling True to Form

Changing forms drastically has its disadvantages. Users are familiar with the way forms display buttons, lists, etc.

Changing them too much can cause mistakes and loss of data because the form has not been filled out properly

You may also have to place too many directions on how to fill in the form

Best to stick with what works

HTML Form Elements

fieldset = groups related form questions. Most browsers do a good job of displaying background colors, images and borders for this tag

legend = Provides a label for the group of fields and you can change the color, background and font properties

text fields = input type and <textarea >create text boxes on a form. You can change font, font-family, and other text properties as well as add backgrounds and borders.

Buttons on a Form

you can set the width property of the tags, but only the <textarea> obeys the height property.

buttons = allow your visitors to submit a form, reset the contents, or set off another action. Safari does not allow any changes for the

buttons, but all other browsers go wild, allowing alteration of color, background, text formatting, borders, etc. You can even set the text to left, middle, or right using the text-align property.

Drop-Downs and Radio Buttons Drop-down menus = <select> tag.

Safari allows font-family, color, and size. Other browsers allow background color, image, and borders

Checkboxes and Radio Buttons = Most browsers do not allow formatting of these elements. Opera allows a background color that appears inside the box or button. IE adds background color AROUND the box

or button.

Lay Out Forms Using CSS

The easiest approach is with an HTML table

You can format the table with all of the attributes normally attributed to a table

Table lend themselves well to the set up of a form