chapter 10 formatting tables and forms. using tables the right way html and xhtml have a lot of...
TRANSCRIPT
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