Table of Contents
Editing
| Coding
| HTML Cheat Sheet
| CSS Cheat Sheet
Tables:
| ... HTML tables
| ... The Grid Class
| ... Beyond The Grid Class
| ... Fixed Table Layout
| ... Tabs
Splitting Help Pages
| Footnotes
| Glossary
| Related Links
HTML Tutorial Home Page
The KGS help pages use inline styles. This means that they use a style attribute followed by a CSS property after a relevant tag. For example, relative positioning,
<p style="position:relative; left:25px; line-height:175%;"> The KGS help pages use ... </p>,
was used to indent this paragraph. The "line-height" property increased the space between the lines. The "text-indent" property indented the first line.
Relative positioning is used in the Coban Main Window to help set off the subsections from the sections.
Some Useful CSS Properties
CSS Tutorial Home Page
All CSS properties
KGS Classes
The four tables displayed below are intended to be used as templates. Each table is a simple representative of a family of tables that are obtained from the basic type by adding various style attributes. The simplest kind of table is an HTML table. The HTML family includes the other three families since all tables are obtained by adding CSS styles to an HTML table.
The tables in this section are all followed by a blank half-line.
This section is divided into five subsections, not including this introductory section. Each subsection contains one table. The first four subsections are enclosed with only one pairs of div tabs ( <div>, </div>). Only one "style='position:relative; left:25px;'" statement is then needed to indent the first four subsedtions.
Tables can be built with HTML using HTML "table" tags and attributes. HTML tables are left adjusted and use double-line borders by default. The following table uses the "border" attribute in its "table" tag: <table border="1">.
Animal | Vegetable | Mineral |
---|---|---|
monkey | peas | diamonds |
baby hippopotamus | spinach | ruby |
Using the KGS "grid" class is the easiest way to get a table that looks better than a simple HTML table. The drawback of the "grid" class is that its attributes can not be over-ridden (as far as I know. dj, 1020). For example, it must be centered in the page. The following table uses the "grid" class. The table tags looks like this: <table class="grid">, </table>. In addition to the use of the "grid" class, the text in the cells is padded and centered. The tags for the data in a cell look like this <th style="padding:5px; text-align:center;">, </td>
Animal | Vegetable | Mineral |
---|---|---|
monkey | peas | diamonds |
baby hippopotamus | spinach | sandstone |
Instead of using the KGS "grid" class, the CSS table properties. The "border-collapse:collapse" attribute specifies the use of single line borders instead of double line borders. The border attribute defines the width of the borders independently for each cell. This method allows left aligned tables and tables with thicker borders for the table headers. In addition, this table is floated with a (<div style="float:left; margin-right:25px;">, </div>) block delimiter. The code for this table was used as a template for the tables in the Abbreviations and Acronyms section of the Newbie FAQ.
Animal | Vegetable | Mineral |
---|---|---|
monkey | peas | diamonds |
baby hippopotamus | spinach | ruby |
The following table uses the "table-layout:fixed" attribute. When "fixed" is specified for the "table-layout", the width of each column is specified with a "width" attribute in the table header (th) tags. The following table uses "width:200px". Long tables display noticeably faster on the user's screen with the the "fixed" property than they do with the "auto" property. The column widths are computed from the width of the largest entry in the column when the "auto" is specified. "Auto" is the default value if the "table-layout" is omitted.
The "padding" attribute is not used. If it were, only the height of the cells would be affected. The width is already determined by the "width" attribute. The height of the cells may also be set via the "height" attribute. The columns do not all have to have the same width. In the example below, the do.
Animal | Vegetable | Mineral |
---|---|---|
monkey | peas | diamonds |
baby hippopotamus | spinach | ruby |
Borderless tables with a fixed table layout are a convenient method for simulating tabs. This syntax of this type of table is almost as simple as a Grid Class table. A line height of 115% is used in the div tabs surrounding this table to get a little space between the table rows. There is no padding in the cells. The table data uses a font size of 14 pixels.
Twenty One Questions
Animal | monkey, baby hippopotamus |
Vegetable | peas, spinach |
Mineral | diamonds, ruby |
1 A simple ">" (instead of ">") works too, and it makes the code easier to read!
2 The en dash makes a better arrow (–>) than does the hyphen (->) at least in the Firefox browser display. The mdash can also make an arrow: —>.
3 The "thin space" is slightly smaller than the "non-breaking space". Thin spaces can mess up how browsers handle line spacing. For example, they can cause Firefox to randomly insert extra blank lines between elements. These lines can come and go when the user adjusts the width of their browser window. (as of March 1, 2011. dj)