onlyforbopi
1/14/2018 - 9:15 AM
Html - Tables
- Basic Table Usage
- Table Specific Attributes
- Tables with thead/tbody
- Tables and the colspan attribute
- Tables with the row span
- Tables with background color/images
- Nested tables and table colored borders
- Tables with various inline css
###########################
# How to create tables in css
* <table></table> : Defines a table space
* <tr></tr> :
<table>
<tr> -> Defines table row
<td> -> 1st element
<td> -> second element
</tr>
<tr> -> Defines new row
<td> - 1st Element
<td> -> Second Element
</tr>
</table>
</table>
<!-- Simple table template -->
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
<!-- Advanced table templte -->
<table border="1px">
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br>
321 Willow Way<br>
Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>
<!-- SIDE BY SIDE MAINBOX -->
<style type="text/css">
table.example1 {
background-color:transparent;
border-collapse:collapse;
}
table.example1 td {
border:1px solid black;
padding:5px;
width:50%;}
</style>
<table class="example1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
<!-- SIDE BY SIDE WITH HEADER -->
<style type="text/css">
table.example2 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example2 th, table.example2 td {text-align:center;border:1px solid black;padding:5px;}
table.example2 th {background-color:AntiqueWhite;}
table.example2 td:first-child {width:20%;}
</style>
<table class="example2">
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
<!-- SIDE BY SIDE WITH SINGLE HEADER -->
<style type="text/css">
table.example3 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example3 th, table.example3 td {text-align:center;border:1px solid black;padding:5px;}
table.example3 th {background-color:AntiqueWhite;}
table.example3 td:first-child {width:20%;}
</style>
<table class="example3">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
<!-- UP DOWN WITH SIDE HEADER -->
<style type="text/css">
table.example4 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example4 th, table.example4 td {text-align:center;border:1px solid black;padding:5px;}
table.example4 th {background-color:AntiqueWhite;}
table.example4 th:first-child {width:20%;}
</style>
<table class="example4">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
<!-- UPDOWN SIDE HEADER NO BORDER COLOR -->
<style type="text/css">
table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;}
table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;}
table.example5 th {background-color:LimeGreen;color:white;}
table.example5 th:first-child {width:20%;}
</style>
<table class="example5">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>Right, we'll go with this simple example. This is the table we're going to make rounded. The corners have to be cells on their own, with nothing else in them. I have put an 'o' in each of the corner cells, so you can predict how this is going to work out. There are four corners, so we'll need four square-shaped images to put into these cells. Each of the curves will be different because they are facing different ways.
The code for your table will be:
<table border="0" width="200" cellpadding="0" cellspacing="0">
<tr bgcolor="#cc00cc">
<td width="15">o</td>
<td width="170"> </td>
<td width="15">o</td>
</tr>
<tr bgcolor="#cc00cc">
<td width="15"> </td>
<td width="170" bgcolor="#cc3399" align="center">
main content cell
</td>
<td width="15"> </td>
</tr>
<tr bgcolor="#cc00cc">
<td width="15">o</td>
<td width="170"> </td>
<td width="15">o</tr>
</table>
Make sure you've read and understood the basic tables tutorial first. Now, note that the width is defined both overall and in each table cell, and the border, cellpadding and cellspacing are all set to 0. This is to make sure there is no space between the cell sides and the images you'll be putting into them.
Remember that empty cells need to have s in them so that they display. If you use the code above you may find that the rows are too tall — it's because of those non-breaking spaces, since they are the same height as size 3 text. All you need to do is wrap a low-sized font tag around them, like so:
<font size="1"> </font>
Using the height attribute of table cells may help too — set them to the same as your image sizes.
The Graphics
Example image of the rounded corner (close-up)
top right gif image from rounded table border bottom left gif image from rounded table border bottom right gif image from rounded table border
Now, I go into my graphics editor; anything that can save an image as a gif will do. Pick a definite size you're going to make your corners — your cell widths will have to be the same. It's probably a good idea to have your table structure made first, so you know the dimensions and colours you'll be using. I made my dimensions 15x15, for some nice small curves, but you can have big ones if you want.
Just start with a square, and make sure that the background is the same colour as the background behind the table, to preserve the anti-aliasing (softening) effects. Use a round brush and add in the curve, drawing with the exact colour that the table's bgcolor is set to (so you get a perfect match). When you have made one, flip and mirror your image to create the other corners. Remember when naming your graphics to put their positions in for easy placement — try 'topleft.gif' etc.
Now just place each image into the corresponding table corner. Remember when doing this to keep the table structure tight — don't have any spaces between the tags, especially between the image tags and the tds. If the spacing doesn’t look right, try adding style="line-height: 0px" to the tr elements to make the rows narrower.
Once you've done everything right, your finished table will look a little something like this:<!-----
The frame attribute is to be used with border to decide which parts of the external border will display. The values available are:
void: displays no border
box: displays all four sides (default)
border: also displays all four sides
above: displays top border only
below: displays bottom border only
hsides: displays top and bottom borders
vsides: displays left and right borders
lhs: displays left border only
rhs: displays right border only
With these values you can have tables like this:
Which is achieved with code link this:
<table border="3" frame="hsides">
<tr><td>text</td><td>text</td><td>text</td></tr>
</table>
On the inside, rules is the man to talk to for the internal borders — the lines between the cells. Values:
none: hides all interior borders
all: displays all borders (default)
cols: displays borders between columns
rows: displays borders between rows only
groups: displays borders between row groups (thead, tbody, tfoot) and column groups (colgroup, col) only.
text text text
These values allow you to create tables like this:
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px" frame="above" rules="cols">
<colgroup span="2" width="10px">
</colgroup>
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
<th rowspan="3">Grade</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td>1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr bgcolor="#ff0000">
<td align="right">Bride of Frankenstein</td>
<td colspan="2">
<table border="1px">
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!--
In relatively large tables the rows can be grouped into sections, giving the table a bit more form. We can define a header, a footer, and one or more body sections for each table, using the <thead>, <tfoot> and <tbody> tags. What this is hoped to eventually achieve are browsers that can scroll the body of a table independently of a fixed header and footer. Also, if a long table is printed, browsers could repeat header information on each page.
Each of these tags will hold groups of rows inside them. The structure is as shown below:
-->
<table>
<thead>
<tr> ... header rows ... </tr>
</thead>
<tfoot>
<tr> ... footer rows ... </tr>
</tfoot>
<tbody>
<tr> ... first block of data rows ... </tr>
</tbody>
<tbody>
<tr> ... second block of data rows ... </tr>
</tbody>
</table>
<!--
Note that both the header and footer information come before any of the table body.
This is so that the header and footer can be constructed and displayed before the browser
receives the data rows that it will put between them. If your browser does not support
this, your footer will appear above the content. Still, browser support is on the way,
and Netscape 6 already implements this.
If your table only contains one tbody section you can leave out the <tbody></tbody> tags,
although I'd imagine they're useful to have in place, for stylesheet implementation
and all that jazz. As always in these cases, it's best to leave them in.
--><!---
Nesting tables is the practise of placing an entire table
inside a td element of another table, it was widely used for
structuring html before css became widespread, now the structuring
of pages with tables is not suggested anymore.
It can still be useful for making coloured borders to tables
--->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
<th rowspan="3">Grade</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr bgcolor="#ff0000">
<td align="right">Bride of Frankenstein</td>
<td colspan="2">
<table border="1px">
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!-- Ex 2 -->
<table>
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
<table>
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>
<!--- USING NESTED TABLES TO GIVE TABLES COLOURED BORDERS
There is an attribute to change the colour of your table borders (bordercolor), but it is
only supported by Internet Explorer, and so Netscape users will get a dull grey one.
Using nested tables is an old hack to give your tables coloured borders. You can use this
to create boxes similar to the ones in the navigation bar of this page (although they are
created through CSS borders).
To make boxes like these, you're using the bgcolor attribute of tables — it actually has
nothing to do with borders at all. Here's the code:
-->
<table border="0" bgcolor="#006600" cellpadding="5" cellspacing="0">
<tr><td>
<table width="100%" border="0" bgcolor="#009900" cellspacing="0">
<tr><td>
table content
</td></tr>
</table>
</td></tr>
</table>
table content
That’ll create the table to the right. See, I’ve set both table’s borders to 0 to get rid of them. Now, the main table’s background colour is set to the border colour you want. The trick is in using the main table’s padding — this is what the border’s thickness depends on. The inner table is being pushed in by the padding, leaving a gap of the outside colour. If your inner table is going to contain multiple cells, adjust its cellspacing if you want some border between them.
<!---
colspan (columnspan) and rowspan are used in case we want to
have a table element that occupies the room multiple elements
would, either vertically (rowspan) or horizontally (colspan)
Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
There are no differences between HTML 4.1 and HTML 5.
Can apply to <td> <th>
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
<th rowspan="3">Grade</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr bgcolor="#ff0000">
<td align="right">Bride of Frankenstein</td>
<td colspan="2">1935</td>
</tr>
</table>
</body>
</html>
<!-- colgroup
Setting up a <colgroup> implies a structural grouping among the columns it spans, while the <col> tag is more of a shortcut to give attributes or stylings to certain columns. Both of these tags have the span attribute, which allows one tag to control multiple columns at a time.
Some examples are necessary to illustrate these tags in operation. To group the first ten columns in a table together and give them each a width of 30 pixels, drop this code in before any rows or cells:
<colgroup span="10" width="30">
</colgroup>
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<colgroup span="2" width="10px">
</colgroup>
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
<th rowspan="3">Grade</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td>1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr bgcolor="#ff0000">
<td align="right">Bride of Frankenstein</td>
<td colspan="2">
<table border="1px">
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
<!--
A colgroup with no span attribute has a default span of 1 column. It can take other table attributes like align and valign too. If you're going to need a few columns in the middle to be formatted differently, you need to specify them with col. The following will create a 25-column table with the tenth column being styled differently to the rest.
-->
<table>
<colgroup width="50">
<col span="9">
<col class="special">
<col span="15">
</colgroup>
<thead>...
<tr>...
...</table>
<!--
n this example the colgroup is given a width of 20 pixels. This is inherited by all
of the columns spanned by the group. If you're using col tags, you can't give the
colgroup a span; instead you must add col tags until every column has been taken care of.
The first col tag takes care of the first 9 columns, then the tenth column is controlled
specifically, and then the rest of the columns are filled in. Note that, even though
I'm not applying any further attributes to the last few columns, I still add in this
tag so that we've covered every column.
These two tags are also a way to tell your browser how many columns are in your table,
by adding up the spans of all of the colgroups and cols. As long as you've specified
a main width for the table, this allows your browser to display the table incrementally
(as it downloads), which is a welcome change from the historical bane of table layouts
— they don't display until they've been downloaded in their entirety.
For this reason, you need to make sure that you're adding up your columns right.
--><!--
The two attributes used to do this as the same as those used in <body></body>
bgcolor -> sets the background color
background -> sets the background image.
bgcolor will not work in HTML 5, see CSS.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr bgcolor="#ff0000">
<td align="right">Bride of Frankenstein</td>
<td background="https://i.pinimg.com/564x/65/ee/a1/65eea1198dd4e4ee1b8dd2378b74411a.jpg" height="400">1935</td>
</tr>
</table>
</body>
</html>
<!--- CSS for bgcolor --->
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
<!-- CSS for background image -->
<style>
table.example-table {
background: url("/path/to/url");
/* Source citing */
}
</style>
<table class="example-table">
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table><!--
You can add table headers with the <th></th> tag
Default style for header cells is :
text-align: center
font-weight: bold
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:40px;">
<th>Movie</th>
<th>Date</th>
</tr>
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html><!--
*******************************
** border
can be set to any value, for bigger borders around your tables
and between your cells. Note that most tables have their border
set to 0 — i.e. invisible, with background colours used to define the edges
of the cells.
-->
<!DOCTYPE HTML>
<head></head>
<body>
<div>
<table border="1px">
<tr>
<td>One</td>
</tr>
<td>Two</td>
<tr>
<td>Three</td>
</tr>
<tr>
</tr>
</table>
</div>
</body>
<!--
*******************************
**align
just like most elements, whole tables can be aligned to the center,
left or right.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px" align="center">
<tr style="height:100px">
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td cellpadding="10px">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!--
*******************************
**width
is used to specify how wide the table is, either in pixels or in a
percentage of the screen width. For example, you could
specify width="400" or width="80%".
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px" align="center" width="70%">
<tr style="height:100px">
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td cellpadding="10px">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!--
*******************************
**cellpadding
is the space around anything in the td. For instance,
in the first of these tables, cellpadding is set to 0, and in the second it is 5.
This is an attribute for the entire table, not supported in HTML 5. Use css then:
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px" align="center" width="70%" cellpadding="20px">
<tr style="height:100px">
<td >King Kong</td>
<td>1933</td>
</tr>
<tr>
<td cellpadding="10px">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS VERSION -->
td {
padding: 30px
}
<!-- If you add padding to an entire table, it will create a frame around
the entire table -->
td {
padding: 30px
}
table {
padding: 10px
}
<!--
*******************************
**cellspacing
is the space between cells. The border between them is split.
You’ll understand this much better with an example. Again, it’s 0 and 5
This is not supported in HTML 5, see CSS solution for that.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px" align="center" width="70%" cellspacing="10">
<tr style="height:100px">
<td >King Kong</td>
<td>1933</td>
</tr>
<tr>
<td cellpadding="10px">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS SOLUTION -->
td {
padding: 30px
}
table {
border-collapse: separate;
border-spacing: 20px;
}
<!--
******************************
**Horizontal Cellalignment(not an attribute - See align / valign)
Horizontal align:
Not only can you align the entire table to either side or to the middle,
you can also align the text, or images, or whatever, inside a cell to
either side, middle, or to the top or bottom. For instance:
You simply put the align attribute in the td element (or in the tr if you want
to affect the whole row). Like <td align="right">.
Html 5 does not support align on td, see css solution.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:100px">
<td align="center" >King Kong</td>
<td>1933</td>
</tr>
<tr>
<td cellpadding="10px">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS VERSION FOR HTML 5 -->
<!-- Can also be set inline, using the style tag -->
td {
padding: 10px;
text-align:right;
}
table {
border-collapse: separate;
border-spacing: 20px;
}
<!--
******************************
** Vertical CellAlignment
valign means Vertical Align. In the first cell below the valign is
set to bottom and in the second valign="top". Valign works better if we set
each row's height with height, and not padding. NOT SUPPORTED IN HTML5. See CSS.
HTML supports CSS : vertica-align: top/middle/bottom attr.
left is the default for align and middle for valign.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td>1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS -->
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
</body>
</html>
<!--
********************************
**tablecellwidth
You can add the width="x" attribute into either your table element or into
individual cells. If you put it into the table element, you’ll be specifying
how wide the table is on the screen, in pixels or as a percentage of the screen.
Try to keep the widths under 750 pixels at most, so that it fits into the
width of most people’s monitors. If you’re setting it as a
percentage, don’t forget the % mark.
Usually cells resize themselves depending on what you’ve put into them,
but you can directly specify how wide you want them by putting the width
attribute in. This way you’re specifying their width in pixels as before, or
their percentage of the table that they’re in. Once you’ve set one, the others
will sort the remaining space out themselves.
Remember, anything can go inside a table cell. Images, text: the lot. You could
put all your content in a table and use it to align things up or lay out charts
and graphs. See what you can come up with
Table width is not supported in HTML 5 as an inline attribute. See CSS instead.
Pixels or percentages can also be used.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td width="80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS way - compatible with HTML 5-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
td {
width: 80%
}
<!--
*******************************************
** Cell height attribute
The height attribute specifies the height of a cell.
Normally, a cell takes up space it needs to display content, height
sets a predefined height to it.
-->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr style="height:100px">
<td valign="top" >King Kong</td>
<td style="width:80%">1933</td>
</tr>
<tr style="height:100px">
<td valign="bottom">Dracula</td>
<td>1897</td>
</tr>
<tr>
<td align="right">Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>
<!-- CSS FOR HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="height:100px">January</td>
<td style="height:100px">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
<!-- Base table usage ex.1 -->
<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>
<!-- Base table usage ex.2 -->
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
</body>
</html>