WEB HO

OME
troduction HTML Lists Best Web
et Started PHP MySQ
sic « Previous Next Chapter » Hosting
ements Top 10 W
tributes Hosting
eadings The most common HTML lists are ordered and unordered lists: UK Resell
ragraphs Hosting
rmatting Cloud Hos
yles HTML Lists Top Web
nks
mages An ordered list: An unordered list: $6.93 Dom
Extras
bles
sts 1. The first list item  List item Cheap We
rms 2. The second list item  List item Hosting
ames WEB BUI
ames 3. The third list item  List item Download
lors Editor
lornames FREE Flas
lorvalues Try-It-Yourself Examples Website
uick List Free Web
Template
Unordered list
WordPres
How to create an unordered list in an HTML document.
ced Themes
octypes Ordered list W3SCH
SS How to create an ordered list in an HTML document. EXA
ead Get Certif
eta (You can find more examples at the bottom of this page). HTML, CS
ripts JavaScrip
tities PHP, and
RLs W3SCH
RL Encode HTML Unordered Lists BOO
ebserver New Book
mmary An unordered list starts with the <ul> tag. Each list item starts with the <li> HTML, CS
tag. JavaScrip
Ajax
ples The list items are marked with bullets (typically small black circles). STATIS
amples Browser
<ul> Statistics
uiz
<li>Coffee</li> Browser O
rtificate
<li>Milk</li> Browser D
</ul> SHAR
ences PAG
 g List Share wit
tributes How the HTML code above looks in a browser:
ents
lornames  Coffee
lorpicker  Milk
haracter

SCII
O-8859-1 HTML Ordered Lists
mbols
RL Encode An ordered list starts with the <ol> tag. Each list item starts with the <li>
ng Codes tag.
atus Codes
The list items are marked with numbers.
se Version
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list)
and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:

Coffee
- black hot drink
Milk
- white cold drink

Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists,
etc.

More Examples
Different types of ordered lists
Demonstrates different types of ordered lists.

Different types of unordered lists

Demonstrates different types of unordered lists.

Nested list
Demonstrates how you can nest lists.

Nested list 2
Demonstrates a more complicated nested list.

Definition list
Demonstrates a definition list.

HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list

« Previous Next Chapter »

Free Online Website Builder - No Downloading

Needed
Create a free Flash website with our simple, online web design editing
platform. Stunning templates and user-friendly tools make website building
easy and fun.

Start Creating your free website now!

Altova® MissionKit® - Integrated Suite of XML

Tools

The Altova MissionKit is an integrated suite of tools ideal for:

 XML development
 Web & Web services development
 Data mapping & integration
 Rendering & publishing XML & database
data
 XBRL validation, taxonomy editing,
transformation & rendering
 Chart & report generation for XML & XBRL
 
The MissionKit for XML Developers includes
XMLSpy® - the industry-leading XML editor;
MapForce® - a graphical data mapping,
conversion, and integration tool; StyleVision® - a
visual XSLT stylesheet and report designer;
DiffDog® - an XML-aware diff/merge tool; and 2
additional tools.
 Try all 6 products free for 30 days!

Download a fully-functional free trial

Your browser does not support inline frames or is currently configured not to
display inline frames.

HOME | TOP | PRINT | FORUM

ols is optimized for learning, testing, and training. Examples might be simplified to improve reading a
understanding.
s, references, and examples are constantly reviewed to avoid errors, but we cannot warrent full corre
all content.
While using this site, you agree to have read and accepted our terms of use and privacy policy.
Copyright 1999-2011 by Refsnes Data. All Rights Reserved.

HTML Table Tutorial

Home >> Building Your Website >> HTML Table Tutorial

Help With Creating HTML Tables

I went over tables briefly in my basic HTML tutorial, but since there
are so many attributes for them, I thought it'd be best to create a
separate HTML table tutorial that focuses solely on the various table
attributes.

Try the Auto Table Generator.  It automatically builds your table for you based on the attributes you
specify.

Understanding tables, in my opinion, is one of the important lessons

you can learn.  Tables are such a fundamental part of web page
layouts, and you can do so much with your page design if you
understand how they work.
If you see a web page with a left navigation, usually that page is
created by using one big table with two columns and no border.  The
left column is generally set to a smaller amount than the right column,
thus setting up the left navigation.

Free Table Wizard

Download my free HTML
editor and get access to the
free table wizard that will
help you create HTML tables
in a flash.

It's all yours for free!

Download now.

Basic Table Tags

The three most important tags for tables is the opening table tag,
<table> and the table row and table data tags - <tr> and <td>
respectively.

The <tr> tag represents a row for the table

The <td> tag represents a cell (or column) inside the row.

Now, with that in mind, let's create a simple table:

<table>

<tr>  
<td>A</td>
<td>B</td>
<td>C</td>  
</tr>

<tr>  
<td>X</td>
<td>Y</td>
<td>Z</td>  
</tr>
</table>

And this is what the table would look like published:

A BC
X Y Z

Notice that by looking at the code, you can tell how many rows and
columns are included just by looking at the code.  The two opening
<tr> tags indicate two rows and the three opening <td> tags on each
line represents three data cells (or three columns).

So if you wanted to add another row, you would just start with another
<tr> and so forth....

Adding Table Borders

Adding a border simply involves inserting the border attribute to the
opening table tag. So in the above table the code would be adjusted
accordingly:

<table border="2">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

Notice the "2" represents the thickness of the border. If you had set it
to "0" then there would have been no border at all. If you wanted it
very thick then you could set it to 8, for example.  So now your table
will look like this:

A BC
X Y Z

Changing a Table's Border Color

You can change the color of a table border by simply adding the
bordercolor attribute.

<table border="2" bordercolor="red">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

And here's what it would look like...

A BC

X Y Z

Adjusting Table Cell Spacing and Cell

Padding
You can increase the space within the table cells and the space
between the cells by using the cellpadding and cellspacing 
attributes.

The cellspacing attribute adjusts the space between the cells and
cellpadding adjusts the space within (around) the cell.

<table border="2" cellspacing="10" cellpadding="3">

<tr><td>A</td>  <td>B</td>  <td>C</td> </tr>

<tr><td>X</td>  <td>Y</td>  <td>Z</td> </tr>

 </table>

This is what the table would look like now...

A B C

X Y Z

See how setting the cellspacing attribute to "10" drastically increased

the spacing between the cells, and the cellpadding attribute set to "3"
added a little of space within each individual cell.

If you want a table to have a single border (with no border around the
letters), simply set the cellspacing to "0" and your table will look like
this....

A BC

X YZ

Specifying a Table Width

You can specify the width of a table by using either a percentage or a
pixel width.

<table width="100%" border="2">

<tr>
<td>A</td> 
<td>B</td> 
<td>C</td>
</tr>

<tr>
<td>X</td> 
<td>Y</td> 
<td>Z</td>
</tr>

</table>

Since the width is set to 100% that means the table will take up 100%
of the screen and the columns in the table will be adjusted evenly. 
Here's what it would look like.
 

A B C

X Y Z

As we mentioned, you can also set the table width using pixels instead
of percentages.  So instead of setting it to 100%, you could set it to
300 pixels:

<table width="300" border="2">

<tr><td>A</td>  <td>B</td>  <td>C</td> </tr>

<tr><td>X</td>  <td>Y</td>  <td>Z</td> </tr>

</table>

The table would look like this:

A B C

X Y Z

Setting Column Widths

Sometimes you may not always want your columns to be the same
width.  If this is the case, you need to set values on your table data
<td> cells.  Again, you can set them by using percentages or pixel
widths.

<table width="300" border="2">

<tr>
<td width="70%">A</td>
<td>B</td>
<td>C</td>
</tr>

<tr>
<td width="70%">X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>

This is what this table would look like.

 

A B C

X Y Z

See how the column width for the first column in both rows is set to
70%.  Notice there is no value set for the other 2 columns.  If you do
not set a value for the remaining columns, their width will
automatically be adjusted to take up the remaining space and they'll
share it equally.

Since the table width is set to 300 pixels, and the first column is
instructed to take up 70% of those 300 pixels (roughly 210 pixels), the
other 2 columns divide the remaining 30% of the table equally
(roughly 45 pixels a piece).

You could also have expressed the column widths of this table in pixels
instead of percentages.  The code would have looked like this:

<table width="300" border="2">

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

A B C

A B C

 
See how the width of the columns in each row add up to 300 (210 +
45 + 45) -- which is the width of the table.

What's the Difference Between Using Percentages and Pixel

Widths?

Many people prefer to express their table width and column widths in
percentages because that will ensure that the table takes up the same
amount of screen no matter how big or small the screen resolution is. 

If someone is using a 21 inch monitor to view your site and you have a
table width set to 300 pixels, the table will show up very small on their
screen.  However if you set the table width to 70%, it will take up 70%
of the screen no matter what size monitor the person is using. 

Or, let's say you create a table that is 760 pixels wide and someone
has a 15 inch monitor set to a 640x480 resolution, then that person
will have to scroll left and right just to see the entire table. 

On the other hand, if you set the table width to 100%, the table will fit
the screen no matter what resolution the browser is set to.

So it's really up to you to decide what's the best layout for your tables.
Personally I prefer to use percentages.  That way the table takes up
the same amount of screen no matter what size monitor/resolution
people are using.

Specifying a Table's Height

You can also set the table height by adding the height tag to the table
code.

<table height="250" width="300" border="2">

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

Which will produce the following table:

A B C

A B C

Horizontally Aligning the Content Inside

Tables
The content inside a cell is left aligned by default, but you can also
center or right align the text as well by using the align attributes.

<table width="300" border="2">

<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td width="210" align="center">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

A B C

A B C

See how the first column is aligned to the center?  You can also right
align the columns by using the align="right" inside the <td> cells.

Vertically Aligning the Content Inside the

Table Cells
So far we've kept the table cell alignment at the default, which is the
middle.  Notice in the above table that the A, B, and C are all three
aligned in the middle of their cells.  Well you can change their
alignment to either top, bottom, or middle by using the valign (which
stands for vertical align) tag:

<table height="250" width="300" border="2">

<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

<tr>
<td valign="top" width="210">A</td>
<td width="45">B</td>
<td width="45">C</td>
</tr>

</table>

A B C

A B C

I've set the table height to "250" so the alignment would be more
noticeable. Notice that the A in both rows are aligned to the top.  You
can also align to the "bottom" or the "middle".

Creating a Left Navigation Layout With

Tables
As we mentioned earlier, most left and right navigations are created
using tables.  All you do is create a table with one row, two columns
and no border.  Then align both of your columns to the top (using the
valign tag) so your text will start in the top of the columns, not the
middle.  Then depending on if you're going to have a right or left
navigation, you'll make one column significantly smaller than the
other.

Here's a simple left navigation layout:

<table width="100%" border="0">

<tr>
<td valign="top" width="25%">Left Nav Links Here</td>
<td valign="top" width="75%">Body Here</td>
</tr>

</table>

And here's what it would look like: 

Left Nav Links Here Body Here

Notice I set the border to "0" but it's still showing in the example.  I
just did that to show how the layout would look. If you set your border
to "0" you won't see any lines around your table.

So there ya have it!  That's a general overview of tables.  There's so

much more you can do with them, but if you can understand the basic
layout, you'll be able to do so much with the design of your web site.

More HTML Tools and Tips

Auto HTML table generator
Download HTML tutorial
Free HTML templates
Web hosts that provide free web software
HTML table generator
HTML hex color code chart

HTML
Codes/
Generat
ors
HTML
HTML Marquee Code
Backgro Related:
und
• Scrolling Images
Code
• Marquee Generator
HTML
• Stop/Start Marquee
Bold • Slow Down Marquee
HTML • JavaScript Scroll
Color • Falling-Text Marquee
HTML
Color
You can create a scrolling marquee (i.e. scrolling text or scrolling images) by
Chart
using the <marquee> tag. You can make the text/images scroll from right to
HTML
left, left to right, top to bottom, or bottom to top - it's your choice!
Comme
nt Box
TIP: You can make it easy on yourself by using the marquee generator.
Code
HTML
Scrollbo
x Code
Example Marquee Code
HTML
Text Note that if you can't view the examples, it's likely that your browser doesn't
Code support the marquee tag.
HTML
Image
Code
Slide-in text:
HTML
Link This text slides in from the right, then stays where it is. You will need to refresh
Code this page to see the effect again.
HTML
Marque
e Code
HTML
Music
Code
HTML
Video
This code results in:
Code
HTML
Form
Code @ Your slide-in text g
HTML
Frames Continuous scrolling text:
Code
HTML
Entities
HTML
Exampl
es
HTML
Help/Ch
eat This code results in:
Sheet
HTML
Templat @ Your scrolling text g
es
More Text bouncing back and forth:
Codes..
.
HTML
Generat
or
HTML
Table
Generat
or
Marque
e
Generat
This code results in:
or
Music
Code
Generat
@ Your bouncing text g
or
HTML Text Scrolling Upwards:
Text
Generat
or
Text
Box
Generat
or
MySpac
This code results in:
e
Generat
ors
More
@ Your upward scrolling text g
Genera
tors... Change the Scrolling Speed:
HTML
Tags
HTML 5
Tags
Create
a
Website

This code results in:

@ Slow scro
@ Medium scro
@ Fast scro
Start your domain
Scrolling Images:
Simply replace the src="... part with the location of your own image.

This code results in:

Images & Text (Both Scrolling):
Simply add your text under the image tag (but still within the marquee tags).

This code results in:

@ Sample text under a Marque

Cool Effects with Marquees!

You can use HTML marquees for some cool effects. Check out this falling text
(generated with the Falling Text Generator)...

@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
 @ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.
@ Marquee effects.

More Marquee Tricks

Here are more tricks you can use with your marquees:

 Falling Text (as above)

 Falling Images
 Start/stop your HTML Marquees
 Slow down your HTML Marquees
 Scrolling Images
 Marquee Generator

Also See...
 Marquee Generator
 HTML Color

 HTML Codes
Web Reference
HTML Lists HTML Reference CSS Reference

There are 3 different types of lists. A <ol> tag starts Help Tizag Grow
an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use t
Link to Tizag

New - Tizag.com Forums!

 <ul> - unordered list; bullets
 <ol> - ordered list; numbers
Recent Forum Topics:
 <dl> - definition list; dictionary
- Well..
- I am desigac from Chennai
HTML Ordered Lists - just want to say hi as i am
a newbie here
Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to cr

HTML Code: Advertise Here

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
More Tutorials!
<li>Get Money</li> Microsoft Office Tutorials Artist Tutorials
<li>Move Out</li>
</ol>
HTML Unordered Lists
Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet d

HTML Code:
<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Unordered Lists:

 Milk
 Toilet Paper
 Cereal
 Bread

Here's a look at the other flavors of unordered lists may look like.

HTML Code:
<ul type="square">
<ul type="disc">
<ul type="circle">

Unordered List Types:

type="square" type="disc" type="circle"
 Milk  Milk o
 Toilet Paper  Toilet Paper o
 Cereal  Cereal o

 Bread  Bread o

HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itse

 <dl> - defines the start of the list

 <dt> - definition term
 <dd> - defining definition

HTML Code:
 <dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

HTML Code:
Fromage
     French word for cheese.
Voiture
     French word for car.

Go Back
Continue

Tips
 Use the start and type attributes to customize your lists.
 It is possible to make lists of lists, which is helpful for creating some items, such as outlines.

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

2003-2008 Erack Network | Copyright | Privacy Policy | Advertising Information

Site design by Seattle Web Design

Subscript and superscript

From Wikipedia, the free encyclopedia
Jump to: navigation, search
This article is about the typographical terms. For the genetic process, see Reverse
transcriptase.
For Wikipedia formatting, see Wikipedia:Manual of Style (superscripts and subscripts).
This article contains special characters. Without proper
rendering support, you may see question marks, boxes, or other
symbols.

Example of subscripts and superscripts. In each example the first "2" is a professionally
designed subscript included as part of the glyph set; the second "2" is a manual
approximation using a small version of the standard "2." Notice that the visual weight of
the first "2" matches the other letters better. (The top typeface is Adobe Garamond Pro;
the size of the subscript is about 62% of the original characters, dropped by about 16%.
The second typeface is Myriad Pro; the superscript is about 60% of the original
characters, raised by about 44%.)

A subscript or superscript is a number, figure, symbol, or indicator

that appears smaller than the normal line of type and is set slightly
below or above it – subscripts appear at or below the baseline, while
superscripts are above. Subscripts and superscripts are perhaps best
known for their use in formulas, mathematical expressions, and
descriptions of chemical compounds or isotopes, but have many other
uses as well.

In professional typography, subscript and superscript characters are

not simply ordinary characters reduced in size; to keep them visually
similar to the rest of the font, typeface designers make them slightly
heavier than a reduced-size character would be. Likewise, the amount
that sub- or superscripted text is moved from the original baseline
varies by typeface and by use.

In typesetting, such types are traditionally called superior and inferior

letters, figures, etc., or just superiors and inferiors. In English, most
non-technical use of superiors is archaic.[1] Superior and inferior
figures on the baseline are used for fractions and most other purposes,
while lowered inferior figures are needed for chemical and
mathematical subscripts.[2]

Contents
[hide]
 1 Uses
o 1.1 Subscripts that are dropped below the baseline
o 1.2 Subscripts that are aligned with the baseline
o 1.3 Superscripts that typically do not extend above the ascender line
o 1.4 Superscripts that typically extend above the ascender line
 o 1.5 Alignment examples
 2 Software support
o 2.1 Desktop publishing
 3 Position adjustment in italic/oblique/slanted styles
o 3.1 HTML
o 3.2 TeX
o 3.3 Unicode
o 3.4 OpenType
 4 See also
 5 References
 6 Bibliography

 7 External links

[edit] Uses

The four common locations of subscripts and superscripts. The typeface is Myriad Pro.

A single typeface may contain sub- and super-script glyphs at different

positions for different uses. The four most common positions are listed
here. Because each position is used in different contexts, not all
alphanumerics may be available in all positions. For example, subscript
letters on the baseline are quite rare, and many typefaces only provide
a limited number of superscripted letters. Despite these differences, all
reduced-sized glyphs go by the same generic name of subscript and
superscript. Note that the terms subscript and superscript are
synonymous with the terms inferior letter (or number) and superior
letter (or number), respectively.

[edit] Subscripts that are dropped below the baseline

Perhaps the most familiar example of subscripts is in chemical

formulas. For example, the formula for glucose is C6H12O6 (meaning
that it is a molecule with 6 carbon atoms, 12 hydrogen atoms and 6
oxygen atoms).

A subscript can also distinguish between different versions of a

subatomic particle. Thus electron, muon, and tau neutrinos are
denoted ν
e ν
μ and ν
τ. A particle may be distinguished by multiple subscripts, such as Ω −
bbb for the triple bottom omega particle.
Similarly, subscripts are also used frequently in mathematics to define
different versions of the same variable; for example, in an equation x0
and xf may indicate the initial and final value of x, while vrocket and
vobserver would stand for the velocities of a rocket and an observer.
Commonly, variables with a zero in the subscript are referred to as the
variable name followed by "naught". (e.g. v0 would be read, "v-
naught")

Subscripts are often used to refer to members in a mathematical

sequence or set. For example, in the sequence O = (45, -2, 800), O3
refers to the third member of sequence O, which is 800.

Also in mathematics and computing, subscript can be used to

represent the radix, or base, of a written number, especially where
multiple bases are used alongside each other. For example, comparing
values in hexadecimal, denary, and octal one might write Chex = 12dec =
14oct.

Subscripted numbers dropped below the baseline are also used for the
denominators of stacked fractions, like this: .

[edit] Subscripts that are aligned with the baseline

The only common use of these subscripts is for the denominators of

diagonal fractions, like ½ or the signs for percent %, permille ‰, and
basis point ‱. Certain standard abbreviations are also composed as
diagonal fractions, such as ℅ (care of), ℀ (account of), ℁ (addressed
to the subject), or in Spanish ℆ (cada uno/a, "each one").

[edit] Superscripts that typically do not extend above the

ascender line
See also: superior letter

These superscripts typically share a baseline with numerator digits, the

top of which are aligned with the top of the full-height numerals of the
base font; lower-case ascenders may extend above.

Ordinal indicators are sometimes written as superscripts (1st, 2nd, 3rd

rather than 1st, 2nd, 3rd), although many English-language style
guides recommend against this use. Other languages use a similar
convention, such as 1er or 2e in French, or 4ª and 4º in Italian,
Portuguese, and Spanish.
Many abbreviations use superscripts, especially historically. Examples
in English include Jos and Wm (for Joseph and William), ye (for the,
originally þe), tht or yt (that), yr (your), or maty (majesty).[3] In
handwritten shorthand, many abbreviations are still written this way,
such as defn (definition), expt (experiment), or govt (government). In
French, superscript abbreviations are still quite common, such as M lle
(for Mademoiselle) and Gle (for générale). The standard abbreviation
for “number,” №, also uses a superscript. In early modern writing,
two-letter abbreviations were sometimes written with the superscript
directly above the base letter, as in yͤ or yͭ.

In early Middle High German, umlauts and other modifications to

pronunciation would be indicated by superscript letters placed directly
above the letter they modified. Thus the modern umlaut ü was written
as uͤ; both vowel and consonants were used in this way, as in ſheͨzze or
boͮsen.[4] In modern typefaces, these letters are usually smaller than
other superscripts, and their baseline is slightly above the base font’s
midline, making them extend no higher than a typical ordinal indicator.

Superscripts are used for the standard abbreviations for service mark
℠ and trademark ™. The signs for copyright © and registered
trademark ® are also sometimes superscripted, depending on the use
or the typeface.

On hand-written documents and signs, a monetary amount may be

written with the cents value superscripted, as in $8⁰⁰ or 8€⁵⁰. Often
the superscripted numbers will be underlined: $8⁰⁰, 8€⁵⁰. The
currency sign itself may also be superscripted, as in $80 or 6¢.

Superscripted numerals are used for the numerators of diagonal

fractions, like ¾ or the signs for percent %, permille ‰, and basis
point ‱. Certain standard abbreviations are also composed as
diagonal fractions, such as ℅ (care of), ℀ (account of), ℁ (addressed
to the subject), or in Spanish ℆ (cada uno/a, "each one").

[edit] Superscripts that typically extend above the

ascender line

Both low and high superscripts can be used to indicate the presence of
a footnote in a document, like this5 or this.xi Any combination of
characters can be used for this purpose; in technical writing footnotes
are sometimes composed of letters and numbers together, like this. A.2
The choice of low or high alignment depends on one’s taste, but high-
set footnotes tend to be more common, as they stand out more from
the text.

In mathematics, high superscripts are used to indicate that one

number or variable is raised to the power of another number or
variable. Thus y4 is y raised to the fourth power, 2x is 2 raised to the
power of x, and the famous equation E = mc2 includes a term for the
speed of light squared.

The charges of ions and subatomic particles are also denoted with
superscripts. Cl-
is a negatively charged chlorine atom, Pb4+
is an atom of lead with a charge of positive four, e−
is an electron, e+
is a positron, and μ+
is an antimuon.

Atomic isotopes are written using superscripts. In symbolic form, the

number of nucleons is denoted as a superscripted prefix to the
chemical symbol (for example 3
He, 12
C, 13
C, 131
I, and 238
U). The letters m or f may follow the number to indicate metastable or
fission isomers, as in 58m
Co or 240f
Pu.

Subscripts and superscripts can also be used together to give more

specific information about nuclides. For example, 235
92U denotes an atom of uranium with 235 nucleons, 92 of which are
protons. A chemical symbol can be completely surrounded: 14
6C2+
8 is an ion of carbon with 14 nucleons, of which six are protons and 8
are neutrons.

The numerators of stacked fractions (such as ) usually use high-set

superscripts, although some specially designed glyphs keep the top of
the numerator aligned with the top of the full-height numerals.

[edit] Alignment examples

This image shows the four common locations for subscripts and
superscripts, according to their typical uses. The typeface is Minion
Pro, set in Adobe Illustrator. Note that the default superscripting
algorithms of most word processors would set the “th” and “lle” too
high, and the weight of all the subscript and superscript glyphs would
be too light.

[edit] Software support

[edit] Desktop publishing

Many text editing and word processing programs have automatic

subscripting and superscripting features, although these programs
usually simply use ordinary characters reduced in size and moved up
or down – they are not true subscript or superscript glyphs.
Professional typesetting programs such as QuarkXPress or Adobe
InDesign also have similar features for automatically converting
regular type to subscript or superscript. These programs, however,
may also offer native OpenType support for the special subscript and
superscript glyphs included in many professional typeface packages
(such as those shown in the image above). See also OpenType, below.

Comparison of software support

Default values for glyph transformation
OpenType Keyboard Shortcuts
(non-professional glyphs)
support for
Software user-
professional subscript superscript
size modifiable subscript superscrip
glyphs? position position
settings?
OpenOffice
no 58% -33% +33% yes CTRL+SHIFT+b CTRL+SHIFT
2.3
Microsoft
no 65% -14.1% +35% manual1 CTRL+= CTRL+SHIFT
Word 2002
Adobe
Illustrator yes 58.3% -33.3% +33.3% yes
CS3
Adobe
ordinal
Photoshop 58.3% -33.3% +33.3% manual1 ALT+CTRL+SHIFT+= CTRL+SHIFT
letters only
CS3
Notes:

1. Default subscript and superscript options can be overcome by manually changing the
font size and raising/lowering text.
 HTML subscripts and superscripts

X6 O8M X6O8M
Default subscript and
superscript rendered in Example of possible collision
HTML for fonts in normal of italic styles in HTML.
styles.

[edit] Position adjustment in

italic/oblique/slanted styles
Another subtle adjustment that is most often forgotten in renderers, is
controlling the direction of movement for superscripts and subscripts,
when they don't lie on the baseline. It should notably take into account
the current font's style for italics, notably its slanting direction; most
renderers only adjust the position vertically, and forget to shift it
horizontally as well. This creates collision with surrounding letters in
the same italic size. One can see an example of such collision on the
right side when rendered in HTML. To avoid such problem, it is often
necessary to insert a small positive horizontal margin (or a thin space)
(on the left side of the first the superscript character), or a negative
margin (or a tiny backspace) before the subscript. It is more critical
with glyphs from fonts in "Oblique" styles that are more slanted than
those from fonts in Italic style, and some fonts reverse the direction of
slanting, so there's no general solution except when the renderer takes
into account the font metrics properties that provides the angle of
slanting,

But more generally, the same problem occurs as well between spans
of normal glyphs (non-subperscript and non-subscripts) when slanting
styles are mixed.

[edit] HTML

In HTML and Wiki syntax, subscript text is produced by putting it

inside the tags _and. Similarly, superscripts are
produced with ^and. The exact size and position of the
resulting characters will vary by font and browser, but are usually
reduced to around 75% original size. Note that superscripts are usually
placed too high for many typographic purposes. [citation needed]

[edit] TeX

In TeX's mathematics mode (as used in MediaWiki), subscripts are

typeset with the underscore, while superscripts are made with the
caret. Thus $X_{ab}$ produces Xab, and $X^{ab}$ produces Xab.

[edit] Unicode
Main article: Unicode subscripts and superscripts

Unicode defines subscript and superscript characters in several areas.

Note, however, that fonts which include these characters may align
them quite differently: subscripts may be at or below the baseline,
while superscripts may stop at the cap line or extend above it. The
same font may even align letters and numbers in different ways.
Because of these inconsistencies, these glyphs may not be suitable for
some purposes (see Uses, above).

Unicode includes subscript and superscript characters in the following

blocks:

 the Latin-1 Supplement block contains the feminine and masculine ordinal
indicators ª and º, superscript numerals ¹, ², and ³, and the precomposed diagonal
fractions ½, ¼, and ¾. The copyright © and registered trademark signs ® are also
in this block.
 the General Punctuation block contains the permille sign ‰ and the per-ten-
thousand sign ‱.
 the Number Forms block contains several pre-composed diagonal fractions: ⅐
⅑⅒⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟↉
 the Combining Diacritical Marks block contains medieval superscript letter
diacritics. These letters are written directly above other letters appearing in
medieval Germanic manuscripts, and so these glyphs do not include spacing, for
example uͤ. They are shown here over a long string of
periods: ....ͣ...ͤ...ͥ...ͦ...ͧ...ͨ...ͩ...ͪ...ͫ...ͬ...ͭ...ͮ...ͯ..
 the Superscripts and Subscripts block contains superscripts of numbers,
mathematical symbols, and a few letters: ⁰ ⁱ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇
₈₉₊₋₌₍₎ₐₑₒₓₔ
 the Letterlike Symbols block contains a few symbols composed of subscript and
superscript characters: ℀ ℁ ℅ ℆ № ℠ ™ ⅍
 the Spacing Modifier Letters block has superscripted letters and symbols used for
phonetic transcription: ʰ ʱ ʲ ʳ ʴ ʵ ʶ ʷ ʸ ˀ ˁ ˠ ˡ ˢ ˣ ˤ
  the Phonetic Extensions block has several sub- and super-scripted letters and
symbols: ᴬ ᴭ ᴮ ᴯ ᴰ ᴱ ᴲ ᴳ ᴴ ᴵ ᴶ ᴷ ᴸ ᴹ ᴺ ᴻ ᴼ ᴽ ᴾ ᴿ ᵀ ᵁ ᵂ ᵃ ᵄ ᵅ ᵆ ᵇ ᵈ ᵉ ᵊ ᵋ ᵌ ᵍ ᵎ ᵏ ᵐ ᵑ ᵒ ᵓ ᵔ ᵕ ᵖ ᵗ ᵘ ᵙ ᵚ ᵛ ᵜ
ᵝᵞᵟᵠᵡᵢᵣᵤᵥᵦᵧᵨᵩᵪᵸ
 the Phonetic Extensions Supplement block has a few more: ᶛ ᶜ ᶝ ᶞ ᶟ ᶠ ᶡ ᶢ ᶣ ᶤ ᶥ ᶦ ᶧ ᶨ ᶩ ᶪ ᶫ ᶬ
ᶭᶮᶯᶰᶱᶲᶳᶴᶵᶶᶷᶸᶹᶺᶻᶼᶽᶾᶿ

Consolidated for cut-and-pasting purposes, the Unicode standard

defines complete sub- and super-scripts for numbers and common
mathematical symbols ( ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈
₉ ₊ ₋ ₌ ₍ ₎ ), a full superscript latin lowercase alphabet except q ( ᵃ ᵇ
ᶜ ᵈ ᵉ ᶠ ᵍ ʰ ⁱ ʲ ᵏ ˡ ᵐ ⁿ ᵒ ᵖ ʳ ˢ ᵗ ᵘ ᵛ ʷ ˣ ʸ ᶻ ), a limited uppercase latin
alphabet ( ᴬ ᴮ ᴰ ᴱ ᴳ ᴴ ᴵ ᴶ ᴷ ᴸ ᴹ ᴺ ᴼ ᴾ ᴿ ᵀ ᵁ ⱽ ᵂ ), a few subscripted
lowercase letters ( ₐ ₑ ᵢ ₒ ᵣ ᵤ ᵥ ₓ ), and some greek letters ( ᵅ ᵝ ᵞ ᵟ ᵋ ᶿ
ᶥ ᶲ ᵠ ᵡ ᵦ ᵧ ᵨ ᵩ ᵪ ). Note that since these glyphs come from different
ranges, they may not be of the same size and position, depending on
the typeface.

[edit] OpenType

One of the advanced features of OpenType typefaces is support for

professionally designed subscript and superscript glyphs. Exactly which
glyphs are included varies by typeface; some have only basic support
for numerals, while others contain a full set of letters, numerals, and
punctuation. Since many of these glyphs are not included in Unicode,
they are typically placed in the Unicode Private Use Area.

[edit] See also

 Mathematical notation
 Typographical conventions in mathematical formulae
 Superior letter
 Furigana
 Ruby character
 Typesetting
 Font

[edit] References
1. ^ Bringhurst 2005, pp 311–12.
2. ^ Bringhurst 2005, p 309.
3. ^ http://www.english.cam.ac.uk/ceres/ehoc/conventions.html
4. ^ http://std.dkuug.dk/JTC1/SC2/WG2/docs/n2266.pdf

[edit] Bibliography
  Bringhurst, Robert (2005), The Elements of Typographic Style, 3rd ed.,
Vancouver: Hartley and Marks, ISBN 0-88179-205-5.

[edit] External links

 Vincent Connare’s type-design standards for Microsoft
 Vertical alignment questions from Typophile

[hide]v · d · eTypography