Baca Juga
HTML TARGET ATTRIBUTE
Problem Statement :
Observe the below HTML code that demonstrates the implementation of Different types of target attributes in Hyperlinks.
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
HTML LINKS
Problem Statement :
Observe the below HTML code that demonstrates the implementation of HyperLinks.
Welcome to HEBEON TECHNOLOGIES
Tables
The HTML
element allows web authors to display tabular data (such as text, images, links, other tables, etc.) in a two dimensional table with rows and columns of cells.
Step 3.1: Simple Table
| Heading 1/Column 1 |
Heading 2/Column 2 |
| Row 1 Data Column 1 |
Row 1 Data Column 2 |
| Row 2 Data Column 1 |
Row 2 Data Column 2 |
This will render a consisting of three total rows (): one row of header cells (| ) and two rows of content cells ( | ). | elements are tabular headers and | elements are tabular data. You can put whatever you want inside a | or | .
Heading 1/Column 1 Heading 2/Column 2
Row 1 Data Column 1 Row 1 Data Column 2
Row 2 Data Column 1 Row 2 Data Column 2
Step 3.2: Spanning columns or rows
Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to | and | elements.
| row 1 col 1 |
row 1 col 2 |
row 1 col 3 |
| This second row spans all three columns |
| This cell spans two rows |
row 3 col 2 |
row 3 col 3 |
| row 4 col 2 |
row 4 col 3 |
Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.
rowspan = A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current row until the last row of the table (, |
, or ).
colspan = A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current to the last column of the column group in which the cell is defined.
Step 3.3: Column Groups
Sometimes you may want to apply styling to a column or group of columns. Or for semantic purposes, you may want to group columns together. To do this, use and elements.
The optional tag allows you to group columns together. elements must be child elements of a and must come after any elements and before any table content (e.g., , ,
, etc.).
The optional tag allows you to reference individual columns or a range of columns without applying a logical grouping. elements are optional, but if present, they must be inside a element.
The following CSS styles can be applied to and elements:
border
background
width
visibility
display (as in display: none)
display: none; will actually remove the columns from the display, causing the table to render as if those cells don't exist
Step 3.4: Table with thead, tbody, tfoot, and caption
HTML also provides the tables with the , , , and elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling.
When printing out a table that doesn't fit onto one (paper) page, most browsers repeat the contents of on every page.
There's a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.
