CMS Basics: Working With HTML Tables - University Of Houston

Trang chủ » Html Th 2 Columns » CMS Basics: Working With HTML Tables - University Of Houston

Có thể bạn quan tâm

ADA Compliance | Basic Table Example 1 | Basic Table Example 2 | Notes about HTML and Tables | Sample Table Variations | Additional HTML & Table References | See also: applying custom CSS styles to tables

ADA compliance

UH expects materials on its website to be ADA compliant, so for your Table HTML you will want well-formed code and semantic markup. You should be able to include Table Headers; and you may want to consider adding Table Captions and Table Footers as well.

Basic, Three-Column Table Example One: Merged Header

The following shows a basic html table with a merged header row above three columns, and with the UH-defined table style applied:

The optional Table Caption Goes Here
The Merged Table Header Goes Here
The Table Footer(s) Goes Here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

The HTML looks like this:

<table class="table">    <caption>The optional Table Caption Goes Here</caption>    <thead>        <tr>            <th colspan="3">The Merged Table Header Goes Here</th>        </tr>    </thead>    <tfoot>        <tr>            <td colspan="3">The Table Footer(s) Goes Here</td>        </tr>    </tfoot>    <tbody>        <tr>            <td>Row 1 - Column 1</td>            <td>Row 1 - Column 2</td>            <td>Row 1 - Column 3</td>        </tr>        <tr>            <td>Row 2 - Column 1</td>            <td>Row 2 - Column 2</td>            <td>Row 2 - Column 3</td>        </tr>        <tr>            <td>Row 3 - Column 1</td>            <td>Row 3 - Column 2</td>            <td>Row 3 - Column 3</td>        </tr>        <tr>            <td>Row 4 - Column 1</td>            <td>Row 4 - Column 2</td>            <td>Row 4 - Column 3</td>        </tr>    </tbody></table>

 

Basic, Three-Column Table Example Two: Each Column with its own Header

The following shows a basic html table where each of the three columns has its own header, and with the UH-defined table style applied:

The optional Table Caption Goes Here
Col 1 Header Col 2 Header Col 3 Header
The Table Footer(s) Goes Here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

The HTML looks like this:

<table class="table">    <caption>The optional Table Caption Goes Here</caption>    <thead>        <tr>            <th>Col 1 Header</th>            <th>Col 1 Header</th>            <th>Col 1 Header</th>        </tr>    </thead>    <tfoot>        <tr>            <td colspan="3">The Table Footer(s) Goes Here</td>        </tr>    </tfoot>    <tbody>        <tr>            <td>Row 1 - Column 1</td>            <td>Row 1 - Column 2</td>            <td>Row 1 - Column 3</td>        </tr>        <tr>            <td>Row 2 - Column 1</td>            <td>Row 2 - Column 2</td>            <td>Row 2 - Column 3</td>        </tr>        <tr>            <td>Row 3 - Column 1</td>            <td>Row 3 - Column 2</td>            <td>Row 3 - Column 3</td>        </tr>        <tr>            <td>Row 4 - Column 1</td>            <td>Row 4 - Column 2</td>            <td>Row 4 - Column 3</td>        </tr>    </tbody></table>

 

NOTE: If copying the Table structure text from this published webpage to use as a starter table, you should be able to paste it directly into the CMS's embedded plain-text HTML Editor without retaining extraneous formatting, and the WYSIWYG Editor should then see it as an HTML Table which can be further edited using the CMS's built-in tools.

 

Notes about HTML and Tables

In HTML, tags may either consist of a set of opening and closing tags, such as the table row tags in the table above: <tr></tr>   or  they may be self-closing, such as an image tag <img src="picture.jpg" />  or a horizontal rule tag <hr />

In HTML tables, each row is specifically defined by the material which appears between each set of <tr> ... </tr> tags.

Individual cells of data are defined by the material which appears between each set of <td> ... </td> tags nested inside their parent row tags.

Generally speaking, the number of rows in a table is defined by how many sets of row tags <tr></tr> there are in the table.

The number of columns in a table is interpreted according to how many <td></td> sets (aka 'cells') are included within each row.

In a well-formed table, every row in the table must account for an equal number of cells, either as individually defined sets, or as merged cells. A cell with a 'colspan' declaration represents merged cells and thus will account for the number it declares. In the Header row above, colspan="3" means that one cell can now account for three - two others, plus itself. If rows differ in the number of cells they can account for, the table may not render correctly and may visually appear to be fractured, and/or show spacing gaps. Individuals needing text readers to access your content will find that tables which are not well formed, or which lack distinct markup of headers and captions, are more difficult to interpret.

You may notice that the example table's header row is surrounded by "thead" type row tags, and the table header cell tag is "th" (table header) instead of the usual "td" (table data). The special tags allow the header row information to be better interpreted for their relationship to the cell contents following, and also to display in a more distinct style from the rest of the table.

Also note that the footer area, which will display below the last row of the table when viewed on the webpage, is actually defined near the top of the table's html. To remove an unneeded footer row, delete the footer tags <tfoot> ... </tfoot> and everything between them.

IMPORTANT! In well-formed HTML all tags must be 'nested' correctly: opening and closing completely within their enclosing or 'parent' tags; and closing before a peer-level tag can open after it. For example, the <td></td> tag sets must open after an opening <tr> parent tag and close before any other <td></td> sets that come after it, and before its/their 'parent' row tag closes: </tr> .

Sample Table Variations

Without UH Table Style | Table Striped | Striped and Bordered | Colspan Merge | Rowspan Merge| Responsive Table Notes

The example table without the UH style applied:

The Table Caption Goes Here
The Merged Table Header Goes Here
The Table Footer(s) Goes Here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

The example table with 'table-striped' style added, and no footer row:

The Table Caption Goes Here
The Table With 'table-striped' Style
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the <table> tag is now written like this: <table class="table table-striped">

 

The example table with both 'table-striped' and 'table-bordered' styles added, and no footer row:

The Table Caption Goes Here
The Table With Both 'table-striped' and 'table-bordered' Styles
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the <table> tag is now written like this: <table class="table table-striped table-bordered">

Style names cannot contain spaces, but can contain dashes. Notice all of the different style names are gathered together inside the set of straight quotemarks, and each individual style is separated by a space. Styles can be added and subtracted by changing which style names appear inside the quotemarks.

 

The example table with styles added, no footer - and with cells merged across columns, demonstrating use of 'colspan'

The Table Caption Goes Here
The Table With Merged Cells using 'colspan'
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 1 Row 3 - Column 2 and 3 cells merged across, in the same row
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the third row's second <td> cell is now written as <td colspan="2">and therefore that same row now needs one less set of <td></td> tags:

<table class="table table-striped table-bordered"><caption>The Table Caption Goes Here</caption><thead><tr>   <th colspan="3">The Table With Merged Cells using 'colspan'</th></tr></thead><tbody><tr>   <td>Row 1 - Column 1</td>   <td>Row 1 - Column 2</td>   <td>Row 1 - Column 3</td></tr><tr>   <td>Row 2 - Column 1</td>   <td>Row 2 - Column 2</td>   <td>Row 2 - Column 3</td></tr><tr>   <td>Row 3 - Column 1</td>   <td colspan="2">Row 3 - Column 2 and 3 cells merged across, in the same row</td></tr><tr>   <td>Row 4 - Column 1</td>   <td>Row 4 - Column 2</td>   <td>Row 4 - Column 3</td></tr></tbody></table>

The example table with styles added, no footer - and with cells merged across rows, showing use of 'rowspan'

The Table Caption Goes Here
The Table With Merged Cells using 'rowspan'
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3
Rows 2 and 3 Column 1cells merged Row 2 - Column 2 Row 2 - Column 3
Row 3 - Column 2 Row 3 - Column 3
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3

 

In the HTML, the second row's first <td> opening cell tag is now written as <td rowspan="2">and so the following row now needs to be adjusted also, to have one less set of <td></td> tags.As 'rowspan' implies, the number declared tells how many rows will be affected, and naturally, final results will depend on the whole of the table structure.

<table class="table table-striped table-bordered"><caption>The Table Caption Goes Here</caption><thead><tr>   <th colspan="3">The Table With Merged Cells using 'rowspan'</th></tr></thead><tbody><tr>   <td>Row 1 - Column 1</td>   <td>Row 1 - Column 2</td>   <td>Row 1 - Column 3</td></tr><tr>   <td rowspan="2">Rows 2 and 3 <br />Column 1<br />cells merged</td>   <td>Row 2 - Column 2</td>   <td>Row 2 - Column 3</td></tr><tr>   <td>Row 3 - Column 2</td>   <td>Row 3 - Column 3</td></tr><tr>   <td>Row 4 - Column 1</td>   <td>Row 4 - Column 2</td>   <td>Row 4 - Column 3</td></tr></tbody></table> 

 

Responsive Table Notes

Even well formed code can balk when screensize-responsive webpages try to present tabular material: e.g. HTML Tables. With wide tables, some information can be obscured at narrow screen widths. To help, some browsers may render tables with a scrollbar at the bottom of the table. Some browsers may try and fail.

UH-specific Bootstrap styles should help your tables adapt gracefully in a range of situations. In some instances, however, you may also wish to consider using the "table-responsive" style to help your tables adapt (example follows). The "table-responsive" style can help compress column and/or help ensure a scrollbar is available, depending on the browser.

Following is an example table with the style "table-responsive" added to the opening table tag:<table class="table table-responsive">

The 'responsive' Table's Caption may go here
Col 1 Header Col 2 Header Col 3 Header Col 4 Header Col 5 Header Col 6 Header Col 7 Header Col 8 Header
The Table Footer may go here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3 Row 1 - Column 4 Row 1 - Column 5 Row 1 - Column 6 Row 1 - Column 7 Row 1 - Column 8
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3 Row 2 - Column 4 Row 2 - Column 5 Row 2 - Column 6 Row 2 - Column 7 Row 2 - Column 8
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3 Row 3 - Column 4 Row 3 - Column 5 Row 3 - Column 6 Row 3 - Column 7 Row 3 - Column 8
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3 Row 4 - Column 4 Row 4 - Column 5 Row 4 - Column 6 Row 4 - Column 7 Row 4 - Column 8

 Compare across your audience's expected browsers to the following table not using "table-responsive":

The 'sans-responsive' Table's Caption may go here
Col 1 Header Col 2 Header Col 3 Header Col 4 Header Col 5 Header Col 6 Header Col 7 Header Col 8 Header
The Table Footer may go here
Row 1 - Column 1 Row 1 - Column 2 Row 1 - Column 3 Row 1 - Column 4 Row 1 - Column 5 Row 1 - Column 6 Row 1 - Column 7 Row 1 - Column 8
Row 2 - Column 1 Row 2 - Column 2 Row 2 - Column 3 Row 2 - Column 4 Row 2 - Column 5 Row 2 - Column 6 Row 2 - Column 7 Row 2 - Column 8
Row 3 - Column 1 Row 3 - Column 2 Row 3 - Column 3 Row 3 - Column 4 Row 3 - Column 5 Row 3 - Column 6 Row 3 - Column 7 Row 3 - Column 8
Row 4 - Column 1 Row 4 - Column 2 Row 4 - Column 3 Row 4 - Column 4 Row 4 - Column 5 Row 4 - Column 6 Row 4 - Column 7 Row 4 - Column 8

 

Otherwise, for large or long or wide tables, editors may need to explore additional CSS, JS, etc. options not outlined here if they need to present their content to audiences without access to wide or horizontal displays. Content owners may also want to consider other options, such as breaking up masses of data into smaller portions (if that can be done without impairing the integrity of the data).

See also: UH supported browsers.

 

 

Additional HTML and Table references:

See UIT's information on Using the Styles Popout for Table Styles:http://www.uh.edu/infotech/services/web-services/cms/cms-how-tos/use-the-styles-popout/style-table/

See UH Web Marketing site - UH-specific Bootstrap CSS Styles and Table Structure notes:http://www.uh.edu/marketing/web/bootstrap/content/tables/

Visit the w3schools site:https://www.W3schools.Com/html/html_tables.asp

linkedin-learning-icon.pngLogin to AccessUH and select the LinkedIn Learning (formerly Lynda.com) icon to access a variety of training options, including HTML.

 

Từ khóa » Html Th 2 Columns