Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
DC
Uploaded byDhirendra Chauhan
PPTX, PDF10,885 views

html-table

The document discusses HTML tables and their structure and attributes. It explains that HTML tables allow arranging data into rows and columns using <table>, <tr>, and <td> tags. It then describes various table attributes like border, width, height, bgcolor, background, frame, align, valign, and rules that can customize a table's appearance and layout.

Softwareā—¦
Downloaded 128 times
HTML-Table
Table ā€œTable is Combination of Rows and Columns, Which intersect each other and create cell where user store the valueā€ Row/Tuple Column Cell Intersect
Table Structure
HTML tables allow web developers to arrange data into rows and columns. Html table has following element 1. < table > :The <table> tag defines an HTML table. 2. < tr > : Each table row is defined with a <tr> tag 3. < th > / <td> : <td> and <th> tags which defined the tableā€™s headers and data cells ā€œTables are useful for the general display of tabular dataā€
<table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
RollNo Name 1 Komal <Table > </Table> <tr> <tr> </tr> </tr> <td> </td> <td> </td> <td> <td> </td> </td>
RollNo Name 1 Komal <Table> </Table> <tr> <tr> </tr> </tr> <td> </td> <td> </td> <td> <td> </td> </td> RollNo Name 1 Komal
Table Attribute The table tag begins the process of building a table. It carries a long list of attributes , including 1. Border 2. Bordercolor 3. Width 4. Height 5. BGColor 6. BackGround 7. Frame 8. Rules 9. Align 10. Valign
1. Border Attribute A tableā€™s border is specified through BORDER attribute.(Border = size) <table> <tr> <td> Roll No </td> <td> Name </td> </tr> <tr> <td> 1 </td> <td> Komal </td> </tr> </table> <table Border = ā€œ 1 ā€ >
2. BorderColor Attribute A tableā€™s bordercolor attribute is used to specify the color of tableā€™s border.(Bordercolor = ā€œAny colorā€) <table Border = ā€œ 1 ā€ > <tr> <td> Roll No </td> <td> Name </td> </tr> <tr> <td> 1 </td> <td> Komal </td> </tr> </table> <table Border = ā€œ 1 ā€ Bordercolor = ā€œredā€>
3. Width and Height Attribute The width property specifies the width of an element, and the height property specifies the height of an element. < Table width=ā€œ50%ā€ or Height = ā€œ50%ā€>
<table Border = ā€œ 1 ā€ > <tr> <td> Roll No </td> <td> Name </td> </tr> <tr> <td> 1 </td> <td> Komal </td> </tr> </table> <table Border = ā€œ 1 ā€ width=ā€œ50%ā€ or Height = ā€œ50%ā€ >
BGColor We can set background color for whole table or just for one cell Syntax <table bgcolor="color_nameā€>
<table Border = "1" > <tr> <td> Roll_No </td> <td> Name </td> </tr> <tr> <td> 100</td> <td> Komal </td> </tr> BGcolor = "pinkā€œ >
BackGround The background attribute of the TABLE, TR, and TD (TH) elements specifies the background image of the table.
Syntax <table background="back.gif"> Applied to an entire table. <tr background="back.gif"> Applied to all cells in a row. <td background="back.gif"> Applied to one cell.
<table Border = "1" Background="6.gif" width =30% height = 55%> <tr> <td>Roll_No </td> <td>Name </td> </tr> <tr> <td>100 </td> <td>Komal </td> </tr> </table>
Align Align attribute of Table can positioning Tables and their contents in relation to other elements on the Web page. Align attributes can be set in two levels 1. Table Alignment 2. The alignment of content inside the Table Cells.
<table align=ā€œLeft /Center / right "> Syntax
<Table Border = "1" align ="Center"> <tr align =ā€œCenter"> <td> Roll_No </td> <td> Name </td> </tr> <tr> <td> 100 </td> <td> Komal </td> </tr> </table>
Valign The purpose of the HTML valign attribute is to define the vertical alignment of the content of a table cell. Value Description top Sets the vertical alignment of cell content top. middle Sets the vertical alignment of cell content center. bottom Sets the vertical alignment of cell content bottom.
<Table Border = "1" align ="Center"> <tr align =ā€œCenter"> <td Valign="bottom"> Roll_No </td> <td>Name </td> </tr> <tr> <td>100 </td> <td Valign=ā€œTop"> Komal </td> </tr> </table>
Frame The frame Attribute is used to specify the visibility of outside borders. Syntax <table frame="value">
Attribute Values void: It is used to hide the outside border. above: It is used to display the top outside border. below: It is used to display the bottom outside border. hsides: It is used to display the top and bottom outside border. vsides: It is used to display the left and right outside border. lhs: It is used to display the left outside border. rhs: It is used to display the right outside border. box: It is used to display all sides outside border. border: It is used to display all outside border.
<table frame="box"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
<table frame="vsides"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
<table frame=ā€œhsides"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
Rules The rules Attribute is used to specify the which parts of the inside borders that should be visible.
Syntax <table rules="value"> Attribute Values ā€¢none : It does not create any lines. ā€¢Groups : It create lines between row and column groups. ā€¢Rows : It creates line between the rows. ā€¢Cols : It creates line between the columns. ā€¢All : It creates line between the rows and columns.
<table rules="rows"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
<table rules="cols"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
<table rules="all"> <tr> <th>NAME</th> <th>AGE</th> <th>BRANCH</th> </tr> <tr> <td>BITTU</td> <td>22</td> <td>CSE</td> </tr> </table>
THANK YOU