Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html-table

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html-table
Showing posts with label html-table. Show all posts
Showing posts with label html-table. Show all posts

Css Page Layout

Css Page Layout

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are
  • Normal flow
  • The display property
  • Flexbox
  • Grid
  • Floats
  • Positioning
  • Table layout
  • Multiple-column layout
Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

Css Page Layout Examples


0   0   0    2px     #000,
0   0   0    3px     #999,
0   0   0    9px     #fa0, 
0   0   0   10px    #666,
0   0   0    16px   #fd0,
0   0   0    18px   #000;


.columns  { column-count:  4;   column-gap:   10px; }

column-count = determine how many columns we need.

Column-gap = Determine the space between the columns(the gutter).

Css Text Align

The text-align property in CSS is used for aligning the inner content of a block element.

These are the traditional values for text-align:
  • left - The default value. Content aligns along the left side.
  • right - Content aligns along the right side.
  • center - Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
  • justify - Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
  • inherit - The value will be whatever the parent element's is.

ta_1   {  text-align:  left;  }

Text-align = Specific the horizontal alignment of text.

Left = In this case, it sets all textto the left(instead of center or right aligned). 


This text is left aligned.
This text is right aligned.
I'm centered!
I'm justified. I fill the space exactly (except on the last line), even if I have to stretch a bit at times.
I inherit the alignment of my parent. In this case, that means left.

Css Font Weight

The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser

The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:
  • normal
  • bold
  • bolder
  • lighter

bold  {  font-weight:  bold;  }

Font-weight = Sets how thick or thin characters in text should be displayed.

Bold = In this case makes text BOLD. It can be either set to normal, bold, bolder, or, lighter.

Css Margin

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
  • The margin specifies a shorthand property for setting the margin properties in one declaration.
  • The margin-bottom specifies the bottom margin of an element.
  • The margin-top specifies the top margin of an element.
  • The margin-left specifies the left margin of an element.
  • The margin-right specifies the right margin of an element.
The margin property allows you set all of the properties for the four margins in one declaration.

Extract To Align Text With Display And Margin Property

centre { text-align: centre : margin : auto ; display: block; }

Text-align = Specific the horizontal alignment of text.

Margin = Specific all the margin properties.

Display = Specific the type of box used.

Css Text Decoration

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

  • none:  no line is drawn, and any existing decoration is removed.
  • underline:  draws a 1px line across the text at its baseline.
  • line-through:  draws a 1px line across the text at its "middle" point.
  • overline:  draws a 1px line across the text, directly above its "top" point.
  • inherit:  inherits the decoration of the parent.
The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.
Text Decoration Extract
no_td : hover  { text-decoration : none; }
Text-Decoration = Used to remove underlines from links.
None = In this case, underline is removed when the mouse hovers over the link.
Css Float And Clear
The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

Clear And Float Extract

clear  { float: none; clear: both; }

Float = Used to remove underlines from links.

clear: both; = Specific which side(s) of an element floating elements are not allowed. In this case no floating elements allowed on the left or the right side of the text.




Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can't tell that a list is being used just by looking at the web page.
There are three types of lists you can use, and this quick guide will show you how to use each.

Un ordered Lists

An un ordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.

The UI element opens and closes an un ordered list. The items on the list are contained between list item, LI tags. A simple un ordered list containing three items could be created with the following HTML.

<li>Item A</li> 
<li>Item B</li> 
<li>Item C</li> 
Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.

.ul_ex {
list-style-type: disc;
padding-left: 32px;

Ordered Lists

Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the oi tag is used rather than the ui tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.

We're also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.

<li>Step 1</li> 
<li>Step 2</li> 
<li>Step 3</li> 

As you can see below, rather than a bulleted list, we now have a numbered list.

.ol_ex {
list-style-type: decimal;
padding-left: 32px;
margin-bottom: 0px;


Create numbered (ordered) lists showing sequential oredr, preference or priority.

<u1> .. </u1>

Display a bulleted (unordered) list without any extra emphasis on order of importance.

<li> ... </li>

Specifies each list itmen to be bulleted or numered.

<d1> ... </d1>

Resereved specifically for list items definitions.

<dt> .. </dt>

The definition of a single term inline with body content.

<dd> ... </dd>

The description for the defined term.



<dd>black hot drink</dd>
<dd>white cold drink</dd>