1 HTML Tables 22 Objectives You will be able to Create tables in HTML. HTML Tables HTML Tables are intended for display of tabular data. Also used to control page layout. Not a legitmate use of the table tag, but widely practiced by professional programmers. 3 44 HTML Tables HTML tables permit you to have some control over layout while leaving some decisions to the browser.... Define rows inside a table... defines a row Define cells inside a row... defines a cell within a row... defines a table heading cell Put text or other HTML element into a cell Including another table 5 Example: Eyeglass Prescription Lets create this table as HTML in Visual Studio. Create a New File in Visual Studio 6 HTML Page 7 88 Visual Studio Sets Up Skeleton 99 HTML Table Example: Eyeglass Prescription Table Content To save some typing, lets download the table content from the class web site:10 Click on Rx.txt to open in browser. 11 12 Eyeglass Prescription: Heading Eye Sphere Cyl Axis Prism Base PD 13 Eyeglass Prescription: Rows 2 and 3 OD BI OS BI 28.00 Copy table content into Visual Studio Copy table content in browser. Paste into element in Visual Studio. 14 15 Save As... 16 Rx.html 17 Double click the file icon to view in your default browser. Rx.html in Chrome 18 Add a Style Sheet 19 In Visual Studio: File > New File The Style Sheet 20 Save on desktop as RxStyles.css Link the Style Sheet 21 Save Rx.hml on the desktop 22 The Table in Chrome 23 Border s The border style in the tag only puts a border around the entire table. If we want borders around the cells we have to add style rules for and 24 Borders for Cells 25 Table with Borders on Cells 26 Cell Spacing But I really want just one line between each pair of cells. The CSS property border-collapse controls this. 27 Table with No Cell Border Spacing 28 Cell Padding But the cells seem crowded now. To provide some margin inside each cell use the padding property on and 29 Table with Cell Padding 30 Alignment By default anything in a cell is aligned to the left and vertically centered. To specify horizontal alignment use text-align 31 Table with Cell Text Alignment 32 Alignment All data cells are now right aligned. The alphabetic cells should be centered. We can define a class for this. 33 Alphabetic 34 Alignment for Alphabetic 35 Page in Chrome Alphabetic cells are now centered. 36 How to Center the Table on the Page By default the table is in the upper left corner of the page. I would like to have it centered on the page. text-align:center doesnt do this. It only applies to text within its container. margin:auto will make the margins on each side of the table equal. Center the table horizontally. 37 RxStyles.css table { font-family: Arial, Sans-Serif; border:solid 1px; border-collapse: collapse; margin:auto; } 38 Table in Chrome End of Section