Поделиться
2 Computer science grade 10 Tables_presentation1_ 1 variant.pptx
Tables
Learning objective
10.4.2.1 use HTML in web-development
Expected results
Students know
- Demonstrates the skill of creating, saving and opening your own web page.
- Demonstrates knowledge of web document structure
- Uses tags to create a table on your own webpage.
Describe the structure of the HTML webpage.
What tag is used to create the Lists?
What tags are used for formatting text?
HTML Tables
An HTML table is defined with the tag.
Each table row is defined with the tag. A table header is defined with the tag.
By default, table headings are bold and centered. A table data/cell is defined with the tag. Firstname Lastname Age Jill Smith 50 Eve Jackson 94
Firstname | Lastname | Age |
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
HTML Table - Adding a Border
A border is set using the CSS border property:
table, th, td
{ border: 1px solid black; }
If you want the borders to collapse into one border, add the CSS border-collapse property:
table, th, td { border: 1px solid black; border-collapse: collapse; }
Firstname | Lastname | Age |
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
HTML Table - Collapsed Borders
Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
To set the padding, use the CSS padding property:
th, td { padding: 3px; }
Firstname | Lastname | Age |
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Firstname | Lastname | Age |
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
th, td { padding: 9px; }
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
th { text-align: left; }
Firstname | Lastname | Age |
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
table { border-spacing: 5px; }
table { border-spacing: 25px; }
Questions Please
Task
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
