These are CSS shadow properties:

1. text-shadow
2. box-shadow

1).CSS text shadow

The text-shadow property is used to apply shadow to the text.

Using text-shadow property you can add horizontal or vertical shadow with different color and blur radius.

This table summarizes use and properties of text-shadow:

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;

p{
    text-shadow: 2px 2px;
    font-size: 20px;
}

Output:

This paragraph has shadow property.

ii).Text shadow with different color

Syntax:

text-shadow: offset-x offset-y color;

p{
    text-shadow: 2px 2px blue;
    font-size: 20px;
}

Output:

This paragraph has blue shadow.

iii).Text shadow with different color and blur-radius

Syntax:

text-shadow: offset-x offset-y blur-radius color;

p{
    text-shadow: 2px 2px 5px blue;
    font-size: 20px;
}

CSS

This paragraph has blue shadow with blur-radius 5px.

iv).Multiple shadow

Syntax:

text-shadow: shadow1,shadow2,shadow3...;
#Where shadow = offset-x offset-y blur-radius color

p{
    text-shadow: 2px 2px 5px blue, 4px 4px 5px red, 6px 6px 5px #006699;
    font-size: 20px;
}

Output:

This paragraph has blue shadow with blur-radius 5px.

2).CSS box shadow

The box-shadow property is used to create shadow for elements.

CSS have the same property values for box-shadow as in text-shadow.

div{
    box-shadow: 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Creating CSS box-shadow with blur effect.

div{
    box-shadow: 10px 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Stacking Elements in Layers Using z-index Property

Usually HTML pages are considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, boxes can be stacked along the z-axis as well i.e. one on top of the other by using the CSS z-index property. This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

The z-axis position of each layer is expressed as an integer representing the stacking order for rendering. An element with a larger z-index overlaps an element with a lower one.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

Example

Try this code »

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}

CSS Position defines how a certain element should be positioned on a web page. The main importance of this article is to show how to control the position part and display of the content. Doing Positioning with CSS old version is quite complicated therefore a new standard CSS flexible Layout has newer versions. Coming to the positioning and layout model it is quite a difficult part as they have to cope with the browser implementation issues. This positioning property has five different methods namely static, relative, absolute, sticky, fixed.

Syntax Relative:

Position:relative;
Top:10px;
Right:25px;

By default relative positioned element can be moved around with the initial element or we can say it is done in a normal position. The box position is calibrated to the normal flow later it can be used as left, right, top, bottom property.

Syntax Absolute:

Position:absolute;
Top:12px;
Right:23px;

This act according to the parent element. It is positioned exactly at the specified location.

Syntax Static:

Position:static;
display:inline;
Display:inline-block
float:left;
clear:both;
overflow:hidden;

How does CSS Position Work?

This property helps to calculate the layout and content specified in the websites.

There are three sets of properties done in positioning:

• Property 1: Left, Right, Top, Bottom (This implies the distance of an element from the edge corner of the viewport).
• Property 2: The positioning concepts.
• Property 3: Z-Index.
• Property 4: Formatting style.

Given below are some of the CSS positions with their working:

1. Static

Static position elements are set by default and they have no impact on the properties like right, left, bottom, top. They don’t have any special direction it was made positioned with respect to the normal Page.

2. Relative

It is helpful while creating CSS layout and it finds quite difficult. An HTML element with this property works the same as static and they differed by setting the right, left values to the ancestor element.

3. Fixed

Fixed positions are exactly similar to absolute positioning, but they are violated from the normal flow of the text and made fixed in an exact point on the web page and all other elements of HTML behave as it doesn’t exist on the page. The key difference between absolute positioning and fixed positioning is a fixed position will retain their space on the ongoing page when there happened to have some page Scroll.

4. Absolute

In this position, an element is placed with respect to themselves and it is excluded from the normal flow of the document. In general, they are placed in the top-left of their ancestor or parent element.

5. Z-Index

There occurs a scenario where the elements in the web page get overlapped in the normal flow, to determine the exact positioning of those elements on the top or bottom Z- index is used. In layman terms, it sets the stacking order of an element or can be termed as a three-dimension viewport. The positive margin specifies an element should be pushed to the top and the negative margin implies to the bottom. And Z-index doesn’t make well with static positioning principles.

Examples to Implement CSS Position

Below are the different examples of CSS positions:

Examples #1: Using Static Position

This is the example of CSS static position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Static Positioning</title>
<style>
.box{
color: #fff;
background: #73AD21;
padding: 5px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px dotted;
font-family: Arial, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Static Positioned Box example</h2>
</div>
<p> HTML along with CSS makes websites beautiful </p> </div>
</body>
</html>

Output:

Examples #2: Using Relative Positioning

This is the example of the CSS relative position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Relative Positioning</title>
<style>
.box{
position: relative;
left: 50px;
color: #fff;
background: yellow;
padding: 15px;
}
.container{
padding: 45px;
margin: 45px;
border: 4px solid black;
font-family: italic, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Box</h2>
</div>
<p> Hello Folks.</p>
</div>
</body>
</html>

Below Output makes a border created in CSS and notes that an element can be moved in a layout.

Output:

Examples #3: Using Fixed Positioning

This is the example of the CSS fixed position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Fixed Positioning</title>
<style>
.box{
position: fixed;
top: 100px;
left: 150px;
color: #cce;
width: 50%;
background: #efefef;
padding: 20px;
}
.container{
padding:40px;
margin: 40px;
position: relative;
border: 4px solid black;
font-family: calibri, sans-serif;
}
.container p{
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned demo</h2>
<div><strong>Note:</strong> The position of this box is fixed relative to the document's viewport. It doesn't scroll with the page.</div>
</div>
<p> A new request has been posted according to the skills . And please decide to to apply for the course</p>
</div>
</body>
</html>

Output:

Examples #4: Using Absolute Positioning

This is the example of the CSS’s absolute position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Absolute</title>
<style>
.box-green {
position: absolute;
background: green;
width: 90px;
height: 95px;
left: 6px;
top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-green"></div>
<div class="box-blue"></div>
</div>
</body>
</html>

Below output displays an element at the beginning of its parent.

Output:

Examples #5: Demo Using all Three Positioning

This is the example of the CSS’s positions that is by using relative, static and absolute as follows.

Code: ppp.html

<!DOCTYPE HTML>
<html>
<head>
<title> CSS Positioning Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="EDUCBA">
<h1> <c>Position demo <c></h1>
<section>
<h2>relative type</h2>
<div>Static part</div>
<div class="relative">Relat type</div>
<div>Static box</div>
</section>
<section>
<h2>absolute</h2>
<div>Static test</div>
<div class="absolute">Absolute class</div>
<div>Static</div>
</section>
<section>
<h2>fixed Demo</h2>
<div>Static</div>
<div class="fixed">Fixed test</div>
<div>Static</div>
</section>
</body>
</html>

Code: new.css

body {
border: 2px solid black;
}
section {
border: 1px solid black;
margin: 1rem;
position: relative;
}
div {
background: linear-gradient(to bottom, blue, white);
border: 2px dashed black;
height: 26px;
margin: inherit;
width: 80px;
top: 81px;
left: 71px;
}
.relative {
background: linear-gradient (50deg, black, white);
position: relative;
}
.absolute {
background: red;
position: absolute;
}
.fixed {
background: yellow;
position: fixed;
}

Output:

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don’t take up space.

Syntax:

1. visibility: visible|hidden|collapse|initial|inherit;  

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

Are programmers terrified or excited about being a “Jack Of All Trades”? | Specialist or generalist?

hidden: It specifies that the element is invisible (but still takes up space).

collapse: It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as “hidden”

initial: It is used to set this property to its default value.

inherit: It is used to inherit this property from its parent element.

CSS Visibility Example

<!DOCTYPE html>  

<html>  

<head>  

<style>  

h1.visible {  

    visibility: visible ; 

}  

h1.hidden {  

    visibility: hidden  ;

}  

</style>  

</head>  

<body>  

<h1 class=”visible”>I am visible</h1>  

<h1 class=”hidden”>I am invisible</h1>  

<p><strong>Note:</strong> An invisible element also take up the space on the page.   

By using display property you can create invisible elements that don’t  

 take space.</p>  

</body>  

</html>  

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

Changing the Default Display Value

Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.

Note: The CSS display property is one of the most powerful and useful properties in all the CSS. It can be very useful for creating web pages that looks in a different way, but still follow the web standards.

The following section describes you the most commonly used CSS display values.

Display Block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:

Example

span {
    display: block;
}
a {
    display: block;
}

Note: Changing the display type of an element only changes the display behavior of an element, NOT the type of element it is. For example, an inline element set to display: block; is not allowed to have a block element nested inside of it.

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

Example

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Inline-Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:

Example

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None

The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.

Example

h1 {
    display: none;
}
p {
    display: none;
}

The CSS outline properties allow you to define an outline area around an element’s box.

An outline is a line that is drawn just outside the border edge of the elements. Outlines are generally used to indicate focus or active states of the elements such as buttons, links, form fields, etc.

The following section describes how to set the style, color, and width of the outline.

Outlines Vs Borders

An outline looks very similar to the border, but it differs from border in the following ways:

• Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements on the page.
• Unlike borders, outlines won’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
• Outlines do not have any impact on surrounding elements apart from overlapping.
• Unlike borders, outlines do not change the size or position of the element.
• Outlines may be non-rectangular, but you cannot create circular outlines.

Note: If you put an outline on an element, it will take up the same amount of space on the web pages as if you didn’t have an outline on that element. Because it overlap margins (transparent area outside of the border) and surrounding elements.

Understanding the Different Outline Styles

The outline-style property sets the style of an element’s outline such as: solid, dotted, etc.

The outline-style property can have one of the following values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge. Now, let’s take a look at the following illustration, it gives you a sense of the differences between the outline style types.

The value none displays no outline. The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the outline-color value. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the outline color.

Let’s try out the following example and see how it basically works:

Example

h1 {
    outline-style: dotted;
}
p {
    outline-style: ridge;
}

Note: You must specify a outline style in order to make the outline appear around an element, because the default outline style is none. Whereas, the default outline width or thickness is medium, and the default outline color is the same as the text color.

Setting the Outline Width

The outline-width property specifies the width of the outline to be added on an element.

Let’s try out the following example to understand how it actually works:

Example

p {
    outline-style: dashed;
    outline-width: 10px;
}

Tip: The outline width can be specified using any length value, such as px, em, rem, and so on. It can also be specified using one of the three keywords: thin, medium, and thick. Percentage or negative values are not allowed — just like the border-width property.

Specifying the Outline Color

The outline-color property sets the color of the outline.

This property accepts the same values as those used for the color property.

The following style rules adds a solid outline of blue color around the paragraphs.

Example

p {
    outline-style: solid;
    outline-color: #0000ff;
}

Note: The CSS outline-width or outline-color property does not work if it is used alone. Use the outline-style property to set the style of the outline first.

The Outline Shorthand Property

The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.

Let’s take a look at the following example to understand how it works:

Example

p {
    outline: 5px solid 	#ff00ff;
}

If the value for an individual outline property is omitted or not specified while setting the outline shorthand property, the default value for that property will be used instead, if any.

For instance, if the value for the outline-color property is missing or not specified when setting the outlines, the element’s color property will be used as the value for the outline color.

In the following example, the outline will be a solid green line of 5px width:

Example

p {
    color: green;
    outline: 5px solid;
}

But, in the case of outline-style, omitting the value will cause no outline to show at all, because the default value for this property is none. In the example below, there will be no outline:

Example

p {
    outline: 5px #00ff00;
}

Removing Outline Around Active Links

The outline property is widely used to remove the outline around active links.

However, it is recommended to apply some alternative style to indicate that the link has focus.

Let’s try out the following example and see how it basically works:

Example

a, a:active, a:focus {
    outline: none;
}

The CSS border properties allow you to define the border area of an element’s box.

Borders appear directly between the margin and padding of an element. The border can either be a predefined style like, solid line, dotted line, double line, etc. or an image.

The following section describes how to set the style, color, and width of the border.

Understanding the Different Border Styles

The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge. Now, let’s take a look at the following illustration, it gives you a sense of the differences between the border style types.

The values none and hidden displays no border, however, there is a slight difference between these two values. In the case of table cell and border collapsing, the none value has the lowest priority, whereas the hidden value has the highest priority, if any other conflicting border is set.

The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the border-color value. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border color. Let’s check out an example:

Example

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Note: You must specify a border style in order to make the border appear around an element, because the default border style is none. Whereas, the default border width or thickness is medium, and the default border color is the same as the text color.

Setting the Border Width

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

Let’s try out the following example to understand how it works:

Example

p {
    border-style: dashed;
    border-width: 10px;
}

Tip: The border width can be specified using any length value, such as px, em, rem, and so on. In addition to length units, the border width may also be specified using one of three keywords: thin, medium, and thick. Percentage values are not allowed.

Specifying the Border Color

The border-color property specifies the color of the border area. This is also a shorthand property for setting the color of all the four sides of an element’s border.

The following style rules adds a solid border of red color around the paragraphs.

Example

p {
    border-style: solid;
    border-color: #ff0000;
}

Note: The CSS border-width or border-color property does not work if it is used alone. Use the border-style property to set the style of the border first.

The Border Shorthand Property

The border CSS property is a shorthand property for setting one or more of the individual border properties border-width, border-style and border-color in a single rule.

Let’s take a look at the following example to understand how it works:

Example

p {
    border: 5px solid #00ff00;
}

If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

For instance, if the value for the border-color property is missing or not specified when setting the border, the element’s color property will be used as the value for the border color.

In the example below, the border will be a solid red line of 5 pixels width:

Example

p {
    color: red;
    border: 5px solid;
}

But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for this property is none. In the following example, there will be no border:

Example

p {
    border: 5px #00ff00;
}

CSS has several dimension properties, such as width, height, max-width, min-width, max-height, and min-height that allows you to control the width and height of an element. The following sections describe how to use these properties to create a better web page layout.

Setting the Width and Height

The width and height property defines the width and height of the content area of an element.

This width and height does not include paddings, borders, or margins. See the CSS box model to know how the effective width and height of an element’s box is calculated.

Let’s try out the following example and see how it actually works:

Example

div {
    width: 300px;
    height: 200px;
}

The above style rules assigns a fixed width of 300 pixels and height of 200px to the <div> element.

The width and height properties can take the following values:

• length – specifies a width in px, em, rem, pt, cm, etc.
• % – specifies a width in percentage (%) of the width of the containing element.
• auto – the browser calculates a suitable width for the element.
• initial – Sets the width and height to its default value, which is auto.
• inherit – specifies that the width should be inherited from the parent element.

You can not specify negative values to the width and height properties.

Tip: Typically when you create a block element, such as <div>, <p>, etc. browser automatically set their width to 100% of the available width, and height to whatever is needed to show all the content. You should avoid setting a fixed width and height unless it is necessary.

Setting Maximum Width and Height

You can use the max-width and max-height property to specify the maximum width and height of the content area. This maximum width and height does not include paddings, borders, or margins.

An element cannot be wider than the max-width value, even if the width property value is set to something larger. For instance, if the width is set to 300px and the max-width is set to 200px, the actual width of the element will be 200px. Let’s check out an example:

Example

div {
    width: 300px;
    max-width: 200px;
}

Note: If the min-width property is specified with a value greater than that of max-width property, in this case the min-width value will in fact be the one that’s applied.

Likewise, an element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the height is set to 200px and the max-height set to 100px, the actual height of the element will be 100px.

Example

div {
    height: 200px;
    max-height: 100px;
}

Note: If the min-height property is specified with a value greater than that of max-height property, in this case the min-height value will in fact be the one that’s applied.

Setting Minimum Width and Height

You can use the min-width and min-height property specify the minimum width and height of the content area. This minimum width and height does not include paddings, borders, or margins.

An element cannot be narrower than the min-width value, even if the width property value is set to something lesser. For example, if the width is set to 300px and the min-width is set to 400px, the actual width of the element will be 400px. Let’s see how it actually works:

Example

div {
    width: 200px;
    min-width: 300px;
}

Note: The min-width property is usually used to ensure that an element has at least a minimum width even if no content is present. However the element will be allowed to grow normally if its content exceeds the minimum width set.

Similarly, an element to which min-height is applied will never be smaller than the value specified, even if the height property is set to something lesser. For example, if the height is set to 200px, and the min-height is set to 300px, the actual height of the element will be 300px.

Example

div {
    height: 100px;
    min-height: 200px;
}

Note: The min-height property is usually used to ensure that an element has at least a minimum height even if no content is present. However the element will be allowed to grow normally if the content exceeds the minimum height set.

Setting a Width and Height Range

The min-width and min-height properties are often used in combination with the max-width and max-height properties to produce a width and height range for an element.

This can be very useful for creating flexible design. In the following example the minimum width of the <div> element would be 300px and it can stretches horizontally up to a maximum 500px.

Example

div {
    min-width: 300px;
    max-width: 500px;
}

Similarly, you can define a height range for an element. In the example below the minimum height of the <div> element would be 300px and it can stretches vertically up to a maximum 500px.

Example

div {
    min-height: 300px;
    max-height: 500px;
}

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determines how much space an element can take on a web page.

Padding is the transparent space between the element’s content and its border (or edge of the box, if it has no border), whereas margin is the transparent space around the border.

Also, if an element has the background color it will be visible through its padding area. The margin area is always remain transparent, it is not affected by the element’s background color, however, it causes the background color of the parent element to be seen through it.

Width and Height of the Elements

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of that element. The actual width and height of the element’s box depends on the several factors.

The actual space that an element’s box might take on a web page is calculated like this:

You will learn about each of these CSS properties in detail in upcoming chapters.

Now let’s try out the following example to understand how the box model actually works:

Example

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* set padding for all four sides */
    border: 10px solid black; /* set border for all four sides */
    margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}

Note: In CSS box model; the content area of an element’s box is the area where its content, e.g., text, image, video, etc. appears. It may also contain descendant elements boxes.

Tables are typically used to display tabular data, such as financial reports.

But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables.

CSS provides several properties that allow you to control the layout and presentation of the table elements. In the following section you will see how to use CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

Example

table, th, td {
    border: 1px solid black;
}

By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders.

Let’s take a look at the following illustration to understand how a border is applied to a table.

Collapsing Table Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.

In the separate border model, which is the default, each table cell has its own distinct borders, whereas in the collapsed border model, adjacent table cells share a common border. You can set the border model for an HTML table by using the CSS border-collapse property.

The following style rules will collapse the table cell borders and apply one pixel black border.

Example

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Note: You can also remove the space between the table cell borders through setting the value of CSS border-spacing property to 0. However, it only removes the space but do not merge the borders like when you set the border-collapse to collapse.

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells.

To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property. Let’s try out the following example and see how it works:

Example

th, td {
    padding: 15px;
}

You can also adjust the spacing between the borders of the cells using the CSS border-spacing property, if the borders of your table are separated (which is default).

The following style rules apply the spacing of 10 pixels between all borders within a table:

Example

table {
    border-spacing: 10px;
}

Setting Table Width and Height

By default, a table will render just wide and tall enough to contain all of its contents.

However, you can also set the width and height of the table as well as its cells explicitly using the width and height CSS property. The style rules in the following example will sets the width of the table to 100%, and the height of the table header cells to 40px.

Example

table {
    width: 100%;
}
th {
    height: 40px;
}

Controlling the Table Layout

A table expands and contracts to accommodate the data contained inside it. This is the default behavior. As data fills inside the table, it continues to expand as long as there is space. Sometimes, however, it is necessary to set a fixed width for the table in order to manage the layout.

You can do this with the help of CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows, and columns. This property takes one of two values:

• auto — Uses an automatic table layout algorithm. With this algorithm, the widths of the table and its cells are adjusted to fit the content. This is the default value.
• fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing. It is normally faster than auto.

The style rules in the following example specify that the HTML table is laid out using the fixed layout algorithm and has a fixed width of 300 pixels. Let’s try it out and see how it works:

Example

table {
    width: 300px;
    table-layout: fixed;
}

Tip: You can optimize the table rendering performance by specifying the value fixed for the table-layout property. Fixed value of this property causes the table to be rendered one row at a time, providing users with information at a faster pace.

Note: Without fixed value of the table-layout property on large tables, users won’t see any part of the table until the browser has rendered the whole table.

Aligning the Text Inside Table Cells

You can align text content inside the table cells either horizontally or vertically.

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you can use the text-align property in the same way as you use with other elements. You align text to either left, right, center or justify.

The following style rules will left-align the text inside the <th> elements.

Example

th {
    text-align: left;
}

Note: Text inside the <td> elements are left-aligned by default, whereas the text inside the <th> elements are center-aligned and rendered in bold font by default.

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the <th> and <td> elements to top, bottom, or middle using the CSS vertical-align property. The default vertical alignment is middle.

The following style rules will vertically bottom-align the text inside the <th> elements.

Example

th {
    height: 40px;
    vertical-align: bottom;
}

Controlling the Position of Table Caption

You can set the vertical position of a table caption using the CSS caption-side property.

The caption can be placed either at the top or bottom of the table. The default position is top.

Example

caption {
    caption-side: bottom;
}

Tip: To change the horizontal alignment of the table’s caption text (e.g. left or right), you can simply use the CSS text-align property, like you do with normal text.

Handling Empty Cells

In tables that uses separate border model, which is default, you can also control the rendering of the cells that have no visible content using the empty-cells CSS property.

This property accepts a value of either show or hide. The default value is show, which renders empty cells like normal cells, but if the value hide is specified no borders or backgrounds are drawn around the empty cells. Let’s try out an example to understand how it really works:

Example

table {
    border-collapse: separate;
    empty-cells: hide;
}

Note: Placing a non-breaking space ( ) inside a table cell make it non-empty. Therefore, even if that cell looks empty the hide value will not hide the borders and backgrounds.

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the readability of tables that has large amount of data. This is commonly known as zebra-striping a table.

You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.

The following style rules will highlight every odd rows within the table body.

Example

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

A zebra-striped table typically looks something like the following picture.

Note: The :nth-child() pseudo-class select elements based on their position in a group of siblings. It can take a number, a keyword even or odd, or an expression of the form xn+y where x and y are integers (e.g. 1n, 2n, 2n+1, …) as an argument.

Making a Table Responsive

Tables are not responsive in nature. However, to support mobile devices you can add responsiveness to your tables by enabling horizontal scrolling on small screens. To do this simply wrap your table with a <div> element and apply the style overflow-x: auto; as shown below:

Example

<div style="overflow-x: auto;"> 
    <table>
        ... table content ...
    </table>
</div>