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 TablesBring on the Tables

Styling Tables  Because tables possess several type of tags, you need to know WHICH tags to style  Applying PADDING to a 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 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 tag, outlines the table, not the individual cells  Applying the border property to a 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 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  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 or tags one 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  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 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 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 = 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