Study Anytime Any Where We Will Open The Knowledge For You Anish Sir 24x7 Learning solution It Is Time to join JOB
15 August 2018

Study Anytime Any Where

15 August 2018

We Will Open The Knowledge For You

15 August 2018

Anish Sir 24x7 Learning solution

15 August 2018

It Is Time to join JOB

C Programming

C++ Programming

JAVA Programming

Android Language

Android-logo.png

.Net Programming

net-logo-b55c217213ae49991589ed43d7ed58a7.png

c# Programming

photo_1389636992_quiz_image_temp.png

Asp .Net

asplogo-square.png

PHP Programming

58481791cef1014c0b5e4994.png

Search Your Topic

config
Html

Html (2)

Friday, 02 February 2018 05:04

HTML Tables

Written by

Using Tables

  • A table is defined using the <table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.
  • Table cells which act as column headers or row headers should use the <th> (table header) element.
  • Table cells can be merged using the colspan and rowspan attributes.
  • Tables can be broken into sections using the following elements:
    • <thead> — Table header
    • <tbody> — Table body
    • <tfoot> — Table footer
  • A caption can be added to a table using the <caption> element.
  • You can use <col> and <colgroup> to define table columns for styling. However, there are a number of limitations with this practice.

Table Code Sample: Simple Table

<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>
Name Favorite Color
Bob Yellow
Michelle Purple

Table Code Sample: Complex Table

<table>
 <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>
A complex table
Invoice #123456789 14 January 2025
Pay to:
Acme Billing Co.
123 Main St.
Cityville, NA 12345
Customer:
John Smith
321 Willow Way
Southeast Northwestershire, MA 54321
Name / Description Qty. @ Cost
Paperclips 1000 0.01 10.00
Staples (box) 100 1.00 100.00
Subtotal 110.00
Tax 8% 8.80
Grand Total $ 118.80

About Table-Based Layout

It was common in the early days of the web to use tables as a layout device. Before the advent of modern standards-based browsers, this was the easiest way to make sure that page elements were arranged properly on the screen.

This design pattern is now considered very bad. It is bad for the user experience, bad for SEO, and bad for developers who have to maintain pages.

However, that doesn’t mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.

 




Friday, 02 February 2018 04:37

HTML

Written by

Beginners HTML Tutorials

Our HTML tutorials teach you how to create a personal website or site for your business, without forcing you to learn unnecessary theory. We’ll get you building your new website in minutes, not hours.

Our most popular beginners tutorials include:-

  • HTML tables
  • Links
  • Forms
  • Fonts
  • Images

Intermediate & Advanced Tutorials

We’ve plenty of topics for intermediate and advanced HTML learners, too:-

  • CSS tutorials, to make your HTML page look beautiful
  • Javascript for beginners
  • HTML5: What’s New?
  • Semantic Markup
  • Logical tags