HTML Tables
Download as PPTX, PDF6 likes4,881 views
HTML tables are used to display tabular data in rows and columns. The basic structure of an HTML table includes <table>, <tr>, <th>, and <td> tags. <th> tags are used for table headers while <td> tags contain the table data. Attributes like colspan and rowspan allow cells to span multiple rows or columns.
HTML Tables
- 2. Table •How tables are used • Basic table structure • The importance of headers • Spanning rows and columns • Cell padding and spacing • Making tables accessible 2
- 3. HTML tables were created for instances when you need to add tabular material (data arranged into rows and columns) to a web page. Tables may be used to organize calendars, schedules, statistics, or other types of information. Note that “data” doesn’t necessarilymean numbers. A table cell may contain any sort of information, including numbers, text elements, and even images andmultimedia objects. 3
- 4. <table>...</table> : Tabular content (rows and columns) <tr>...</tr> Table row <th>...</th> Table header <td>...</td> Table cell data 4
- 5. 5
- 6. All of the table’s content goes into cells that are arranged into rows. Cells contain either header information (titles for the columns, such as “Calories”) or data, which may be any sort of content. 6
- 7. 7
- 8. 8 shows the elements that identify the table (table), rows (tr, for table row”), and cells (th, for “table headers,” and td, for “table data”). Cells are the heart of the table, because that’s where the actual content goes. The other elements just hold things together.
- 9. 9 What we don’t see are column elements (see note). The number of columns in a table is determined by the number of cells in each row. This is one of the things that make HTML tables potentially tricky. Rows are easy—if you want the table to have three rows, just use three tr elements. Columns are different. For a table with four columns, you need to make sure that every row has four td or th elements; the columns are implied.
- 10. Remember, all the content must go in cells, that is, within td or th elements. You can put any content in a cell: text, a graphic, even another table. 10
- 11. Attribute Purpose Align To align table i.e left, right and center Bgcolor Change the background color Border To use border Cellspacing To create space between the Cells Cellpadding To create space between content and border Colspan rowspan Width To define the width of table, value can be defined in Pixels or %. 11
- 12. the text marked up as headers (th elements) is displayed differently from the other cells in the table (td elements). The difference, however, is not purely cosmetic. Table headers are important because they provide information or context about the cells in the row or column they precede. The th element may be handled differently than tds by alternative browsing devices. For example, screen readers may read the header aloud before each data cell. Note:don’t avoid using th elements because of their default rendering (bold and centered). 12
- 13. 13 How can we differentiate between td and th?
- 14. One fundamental feature of table structure is cell spanning, which is the stretching of a cell to cover several rows or columns. Spanning cells allows you to create complex table structures, but it has the side effect of making the markup a little more difficult to keep track of. You make a header or data cell span by adding the colspan or rowspan attributes 14
- 15. Column spans, created with the colspan attribute in the td or th element, stretch a cell to the right to span over the subsequent columns. <table> <tr> <th colspan="2">Fat</th> </tr> <tr> <td>Saturated Fat (g)</td> <td>Unsaturated Fat (g)</td> </tr> </table> 15
- 16. Row spans, created with the rowspan attribute, work just like column spans, but they cause the cell to span downward over several rows. 16
- 17. By default, cells are sized just large enough to fit their contents, but often you’ll want to add a little breathing room around tabular content. Cell padding is the space inside the cell, between the content and the edge of the cell. Cell spacing, the area between cells, is a little more complicated. 17
- 18. 18