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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

of 83 Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: CENG 449 Lecture 7

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

of 83 Table Color The example below specifies the color of the borders, and the text and background color of th elements: CENG 449 Lecture 7

of 83 table, td, th { border: 1px solid green; } th { background-color: green; color: white;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

of 83 MARGIN, PADDING, POSITIONING CENG 449 Lecture 7

of 83 The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. CENG 449 Lecture 7

of 83 CENG 449 Lecture 7

of 83 Hello! CENG 449 Lecture 7

of 83 body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

of 83 html{ border: 2px solid green; } body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

of 83 html{ border: 2px solid green; } head{ border: 1px solid black; } title{ border: 1px solid blue; } body{ border: 2px solid red; } My Title HERE Hello! CENG 449 Lecture 7

of 83 CSS Margin Margin of an HTML element is the distance from the border of the element to the border of following HTML element. The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. CENG 449 Lecture 7

of 83 margin EX: margin: 10px 20px 10px 10px margin-bottom EX: margin-bottom: 2cm; margin-left EX: margin-left: 2cm; margin-right EX: margin-right: 2px; margin-top EX: margin-top: 10%; CENG 449 Lecture 7

of 83 margin-top/bottom/left/right: possible Values Possible Values Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px % Specifies a margin in percent of the width of the containing element inherit Specifies that the margin should be inherited from the parent element CENG 449 Lecture 7

of 83 To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin": --The margin property can have from one to four values-- margin: 25px 50px 75px 100px; – top margin is 25px – right margin is 50px – bottom margin is 75px – left margin is 100px margin: 25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px margin: 25px 50px; – top and bottom margins are 25px – right and left margins are 50px margin: 25px; – all four margins are 25px CENG 449 Lecture 7

of 83 body{ border: 2px solid red; margin: 0px; } Hello! CENG 449 Lecture 7

of 83 body{ border: 2px solid red; margin-left: 40px; } Hello! CENG 449 Lecture 7

of 83 body{ border: 2px solid red; margin-left: 40px; margin-top: 0px; } Hello! CENG 449 Lecture 7

of 83 body{ border: 2px solid red; margin-left: 40px; margin-top: 0px; margin-right: 0px; } Hello! CENG 449 Lecture 7

of 83 body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

of 83 body { border: 1px solid red; } p{ border:dotted; } A paragraph with no margins specified. CENG 449 Lecture 7

of 83 HTML Block Elements and Inline Elements Most HTML elements are defined as block level elements or inline elements. Block level elements normally start (and end) with a new line, when displayed in a browser. Examples:,,, Inline elements are normally displayed without line breaks. Examples:,,, CENG 449 Lecture 7

of 83 Block level elements normally start (and end) with a new line, when displayed in a browser. As illustrated in slide 33, this is achieved by assigning default top and bottom margin values to the HTML element CENG 449 Lecture 7

of 83 body { border: 1px solid red; } p{ border:dotted; margin: 0px; } A paragraph with no margins specified. CENG 449 Lecture 7

of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

of 83 margin has no relation with the browser size but related to the next border CENG 449 Lecture 7 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified.

of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

of 83 CENG 449 Lecture 7 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified.

of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; margin-right: 0.5cm; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

of 83 p.ex1 { margin-bottom: 2cm; } A paragraph with no margins specified. A paragraph with a 2cm bottom margin. A paragraph with no margins specified. CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; } ol li { border: 2px dotted blue; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; margin-left: 1cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 CSS Padding The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. CENG 449 Lecture 7

of 83 p { background-color: yellow; } p.padding { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; } This is a paragraph with no specified padding. This is a paragraph with specified paddings. CENG 449 Lecture 7

of 83 Padding Values: length Defines a fixed padding (in pixels, pt, em, etc.) % Defines a padding in % of the containing element initial Sets this property to its default value. inherit Inherits this property from its parent element. Padding - Shorthand property: The padding property can have from one to four values. padding: 25px 50px 75px 100px; – top padding is 25px – right padding is 50px – bottom padding is 75px – left padding is 100px padding: 25px 50px 75px; – top padding is 25px – right and left paddings are 50px – bottom padding is 75px padding: 25px 50px; – top and bottom paddings are 25px – right and left paddings are 50px padding: 25px; – all four paddings are 25px CENG 449 Lecture 7

of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; margin-left: 1cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; padding: 1cm; background-color: yellow; } ITEM-1 ITEM-2 CENG 449 Lecture 7

of 83 p.padding { padding-left: 2cm; } p.padding2 { padding-left: 50%; } This is a text with no left padding. This text has a left padding of 2 cm. This text has a left padding of 50%. CENG 449 Lecture 7

of 83 body { border: 1px solid red; } p.padding { padding-bottom: 2cm;} p.padding2 { padding-bottom: 50%; border: 1px dotted blue; } This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%. CENG 449 Lecture 7

of 83 CSS Dimension The CSS dimension properties allow you to control the height and width of an element. height and width properties sets the height and with of an HTML element The height and width properties do not include padding, borders, or margins, just the content of the element Ex: p.ex { height: 100px; width: 100px; } CENG 449 Lecture 7

of 83 height: auto|length|initial|inherit; autoThe browser calculates the height. lengthDefines the height in px, cm, etc. %Defines the height in percent of the containing block initialSets this property to its default value. inheritInherits this property from its parent element. CENG 449 Lecture 7

of 83 p.ex { height: 200px; width: 100px; border: dotted; } The height and width of this paragraph are 200px and 100px. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. CENG 449 Lecture 7

of 83 html { border: solid red; } body { border: solid black; } Hello CENG 449 Lecture 7

of 83 html { border: solid red; background-color: yellow; } body { border: solid black; } Hello CENG 449 Lecture 7

of 83 html { border: solid red; background-color: yellow; } body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

of 83 html { border: solid red; background-color: yellow; height: 99%; } body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

of 83 html { border: solid red; background-color: yellow; height: 100%; } body { border: solid black; background-color: cyan; height: 50%; } Hello CENG 449 Lecture 7

of 83 html { border: solid red; background-color: yellow; height: 100%; } body { border: solid black; background-color: cyan; height: 100%; } Hello CENG 449 Lecture 7

of 83 body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

of 83 p { max-height: 70px; background-color: yellow; overflow: auto; } The maximum height of this paragraph is set to 70px. The maximum height of this paragraph is set to 70px. The maximum height of this paragraph is set to 70px..… …. s CENG 449 Lecture 7

of 83 CSS overflow Property: The overflow property specifies what happens if content overflows an element's box. overflow: visible|hidden|scroll|auto|initial|inherit; visibleThe overflow is not clipped. It renders outside the element's box. hiddenThe overflow is clipped, and the rest of the content will be invisible scrollThe overflow is clipped, but a scroll-bar is added to see the rest of the content autoIf overflow is clipped, a scroll-bar should be added to see the rest of the content initialSets this property to its default value. inheritInherits this property from its parent element. CENG 449 Lecture 7

of 83 div.scroll { background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll; } div.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden; } The overflow property specifies what to do if the content of an element exceeds the size of the element's box. overflow:scroll You can use the overflow property when you want to have better control of the layout. The default value is visible. overflow:hidden You can use the overflow property when you want to have better control of the layout. The default value is visible. CENG 449 Lecture 7

of 83 heightSets the height of an element max-heightSets the maximum height of an element max-widthSets the maximum width of an element min-heightSets the minimum height of an element min-widthSets the minimum width of an element widthSets the width of an element CENG 449 Lecture 7

of 83 CSS Display and Visibility visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: CENG 449 Lecture 7

of 83 h1.hidden { visibility: hidden; } This is a visible heading This is a hidden heading Notice that the hidden heading still takes up space. CENG 449 Lecture 7

of 83 h1.hidden { display: none; } This is a visible heading This is a hidden heading Notice that the hidden heading does not take up space. CENG 449 Lecture 7

of 83 CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: Changing How an Element is Displayed Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. CENG 449 Lecture 7

of 83 li { display: inline; } Display a list of links as a horizontal menu: HTML CSS JavaScript CENG 449 Lecture 7

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback