---

HTML Tables

• The < table> tag defines an HTML table.

• Each table row is defined with a < tr> tag.
• Each table header is defined with a < th> tag. * Each table data/cell is defined with a < td> tag.

— By default, the text in < th> elements are bold and centered.

1- HTML Table - Add a Border To add a border to a table, use the CSS border property

Example

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

---

2- HTML Table - Add 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

---

3- 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: __ 4-Cell that Spans Many Columns To make a cell span more than one column, use the colspan attribute ___ 5- Cell that Spans Many Rows To make a cell span more than one row, use the rowspan attribute:

---

Notes

1- Use the HTML < table> element to define a table

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

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

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

5- 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

---

JavaScript Object Constructors

• The this Keyword

In JavaScript, the thing called this is the object that “owns” the code.

The value of this, when used in an object, is the object itself.

• Adding a Property to an Object

Adding a new property to an existing object is easy:

Example

myFather.nationality = "Jordan";

• Adding a Method to an Object

Adding a new method to an existing object is easy:

Example

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

• Built-in JavaScript Constructors

JavaScript has built-in constructors for native objects:

Example

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

---

Notes :

– Use object literals {} instead of new Object().

– Use string literals “” instead of new String().

– Use number literals 12345 instead of new Number().

– Use boolean literals true / false instead of new Boolean().

– Use array literals [] instead of new Array().

– Use pattern literals /()/ instead of new RegExp().

– Use function expressions () {} instead of new Function().