HTML Tables







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



HTML Tables



❮ Previous
Next ❯



HTML Table Example







































Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy


Try it Yourself »


Defining an HTML Table


An HTML table is defined with the <table> tag.


Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are
bold and centered. A table data/cell is defined with the
<td> tag.



Example



<table style="width:100%">
 
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
 
</tr>
 
<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
 
</tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »



Note: The <td> elements are the data containers of the table.
They can contain
all sorts of HTML elements; text, images, lists, other tables, etc.









googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without borders.


A border is set using the CSS border property:



Example



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

Try it Yourself »


Remember to define borders for both the table and the table cells.




HTML Table - Collapsed Borders


If you want the borders to collapse into one border, add the CSS border-collapse
property:



Example



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

Try it Yourself »


HTML Table - Adding Cell Padding


Cell padding specifies the space between the cell content and its borders.


If you do not specify a padding, the table cells will be displayed without padding.


To set the padding, use the CSS padding property:



Example



th, td {
    padding: 15px;
}

Try it Yourself »



HTML Table - Left-align Headings


By default, table headings are bold and centered.


To left-align the table headings, use the CSS text-align property:



Example



th {
    text-align: left;
}

Try it Yourself »


HTML Table - Adding Border Spacing


Border spacing specifies the space between the cells.


To set the border spacing for a table, use the CSS border-spacing property:



Example



table {
    border-spacing: 5px;
}

Try it Yourself »



Note: If the table has collapsed borders, border-spacing has no effect.




HTML Table - Cells that Span Many Columns


To make a cell span more than one column, use the colspan attribute:



Example



<table style="width:100%">
  <tr>
    <th>Name</th>
   
<th colspan="2">Telephone</th>
  </tr>
  <tr>
   
<td>Bill Gates</td>
    <td>55577854</td>
   
<td>55577855</td>
  </tr>
</table>

Try it Yourself »


HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:



Example



<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
 
<tr>
    <th rowspan="2">Telephone:</th>
   
<td>55577854</td>
  </tr>
  <tr>
   
<td>55577855</td>
  </tr>
</table>

Try it Yourself »


HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag:



Example



<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »



Note: The <caption> tag must be inserted immediately after the <table> tag.




A Special Style for One Table


To define a special style for a special table, add an id
attribute to the table:



Example



<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>




Now you can define a special style for this table:



table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

Try it Yourself »



And add more styles:



table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
   
color: white;
    background-color: black;
}

Try it Yourself »


Chapter Summary




  • Use the HTML <table> element to define a table

  • Use the HTML <tr> element to define a table row

  • Use the HTML <td> element to define a table data

  • Use the HTML <th> element to define a table heading

  • Use the HTML <caption> element to define a table caption

  • Use the CSS border property to define a border

  • Use the CSS border-collapse property to collapse cell borders

  • Use the CSS padding property to add padding to cells

  • Use the CSS text-align property to align cell text

  • Use the CSS border-spacing property to set the spacing between cells

  • Use the colspan attribute to make a cell span many columns

  • Use the rowspan attribute to make a cell span many rows

  • Use the id attribute to uniquely define one table



Test Yourself with Exercises!



Exercise 1 » 
Exercise 2 » 
Exercise 3 » 
Exercise 4 » 
Exercise 5 » 
Exercise 6 »



HTML Table Tags















































TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Specifies a group of one or more columns in a table for formatting
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table



❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more