Slide 1

Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td elements: CENG 449 Lecture 7

Slide 2

Slide 2 of 83 table{ border: 6px solid black; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 3

Slide 3 of 83 Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated: CENG 449 Lecture 7

Slide 4

Slide 4 of 83 th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 5

Slide 5 of 83 table { border-collapse: collapse; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 6

Slide 6 of 83 Table Width and Height Width and height of a table is defined by the width and height properties. table { width: percent | pixel; } pixels:Sets the width in pixels (example: width="50") percent: Sets the width in percent of the surrounding element (example: width="50%") CENG 449 Lecture 7

Slide 7

Slide 7 of 83 table, td, th { border: 1px solid black;} table { width: 100%;} th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 8

Slide 8 of 83 CENG 449 Lecture 7 table, td, th { border: 1px solid black;} table { width: 50%; } th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150

Slide 9

Slide 9 of 83.borderStyle{ border: 1px solid black; } table{ width:50%; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 10

Slide 10 of 83.borderStyle { border: 1px solid black; } table{ width:50; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 11

Slide 11 of 83.borderStyle { border: 1px solid black; } table{ width:50%; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 12

Slide 12 of 83 Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: CENG 449 Lecture 7

Slide 13

Slide 13 of 83 table, td, th { border: 1px solid black; } td { text-align: right; } Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 14

Slide 14 of 83 table, td, th { border: 1px solid black;} table{width:100%; }.leftAlign{ text-align: left;}.rightAlign{ text-align: right;}.topAlign{vertical-align: top; }.bottomAlign{vertical-align: bottom; }.centerAlign{vertical-align: center; } td, th {height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7