Setting the Auto Table Layout
table-layout property determines how a table is rendered in a web page.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Auto Table Layout</TITLE>
<STYLE type='text/css'>
table,td{
border: 1px solid black;
}
.alayout{
table-layout:auto;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Auto Table Layout </H1>
<TABLE class="alayout">
<TR>
<TD class="a1">Column 1</TD>
<TD class="a2">Column 2</TD>
<TD class="a3">Column 3</TD>
</TR>
</TR>
<TR>
<TD>auto auto auto auto auto auto auto auto auto auto auto auto auto</TD>
<TD>auto auto auto auto auto auto auto auto auto</TD>
<TD>auto auto auto</TD>
</TR>
</TABLE>
</BODY>
</HTML>
table-layout property determines how a table is rendered in a web page.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Auto Table Layout</TITLE>
<STYLE type='text/css'>
table,td{
border: 1px solid black;
}
.alayout{
table-layout:auto;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Auto Table Layout </H1>
<TABLE class="alayout">
<TR>
<TD class="a1">Column 1</TD>
<TD class="a2">Column 2</TD>
<TD class="a3">Column 3</TD>
</TR>
</TR>
<TR>
<TD>auto auto auto auto auto auto auto auto auto auto auto auto auto</TD>
<TD>auto auto auto auto auto auto auto auto auto</TD>
<TD>auto auto auto</TD>
</TR>
</TABLE>
</BODY>
</HTML>
web browser determines the table layout according to the widest content in the cells of a table
Setting the fixed table layout
<!DOCTYPE HTML>
<HEAD>
<TITLE>Fixed Table Layout</TITLE>
<STYLE type='text/css'>
table,td{
border: 1px solid black;
}
.flayout{
table-layout:fixed;
}
.f1{
width:200px;
}
.f2{
width:50px;
}
.f3{
width:400px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Fixed Table Layout </H1>
<TABLE class="flayout">
<TR>
<TD class="f1">Column 1</TD>
<TD class="f2">Column 2</TD>
<TD class="f3">Column 3</TD>
</TR>
<TR>
<TD>This column is 200px wide. </TD>
<TD>This column is 50px wide.</TD>
<TD>This column is 400px wide.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Specifying a table caption
the caption side property is used to specify the position of the caption of a table.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Table Caption </TITLE>
<STYLE type="text/css">
table,td,th {
border:1px solid black;
}
caption {
caption-side:top;
border:2px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Table Caption. </H1>
<TABLE>
<CAPTION>Table 1.1: Showing Values of the caption-side Property</CAPTION>
<TR>
<TH>Value</TH>
<TH>Description</TH>
</TR>
<TR>
<TD>top</TD>
<TD>Defines a caption on the top of a table</TD>
</TR>
<TR>
<TD>inherit</TD>
<TD>Specifies that the value of caption-side property is inherited from its containing element</TD>
</TR>
<TR>
<TD>bottom</TD>
<TD>Defines a caption on the bottom of a table</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Displaying border around cells
the border-collapse property specifies how a border is displayed around a table.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Border Collapse</TITLE>
<STYLE type="text/css">
.collapse{
border-collapse: collapse;
}
.separate{
border-collapse:separate;
}
table, td, th{
border:1px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with border-collapse Property</H1>
<P>The border-collapse property value is collapse</P>
<TABLE class="collapse">
<TR>
<TH>Name</TH>
<TH>Age</TH>
</TR>
<TR>
<TD>Name1</TD>
<TD>Age1</TD>
</TR>
<TR>
<TD>Name2</TD>
<TD>Age2</TD>
</TR>
<TR>
<TD>Name3</TD>
<TD>Age3</TD>
</TR>
</TABLE>
<BR/><BR/>
<P>The border-collapse property value is separate</P>
<TABLE class="separate">
<TR>
<TH>Name</TH>
<TH>Age</TH>
</TR>
<TR>
<TD>Name1</TD>
<TD>Age1</TD>
</TR>
<TR>
<TD>Name2</TD>
<TD>Age2</TD>
</TR>
<TR>
<TD>Name3</TD>
<TD>Age3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Specifying Border Spacing
border spacing refers to the space between two adjacent cells in a table.
in CSS the border-spacing property is used to specify the space between adjacent in a table.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
.table1{
border-collapse:separate;
border-spacing:10px;
}
table, td, th{
border:1px solid black;
}
.table2{
border-collapse: separate;
border-spacing:10px 50px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with the border-spacing Property</H1>
<TABLE class="table1" border="1">
<TR>
<TD>name1</TD>
<TD>age1</TD>
</TR>
<TR>
<TD>name2</TD>
<TD>age2</TD>
</TR>
</TABLE>
<BR />
<TABLE class="table2" border="1">
<TR>
<TD>name3</TD>
<TD>age3</TD>
</TR>
<TR>
<TD>name4</TD>
<TD>age4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Specifying border around empty cells
the cells that do not have content is called empty cells
<!DOCTYPE HTML>
<HEAD>
<TITLE>Empty Cells </TITLE>
<STYLE type="text/css">
table{
table-layout:fixed;
border-collapse:separate;
empty-cells:hide;
}
table, td, th{
border:1px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with empty-border Property </H1>
<TABLE >
<TR>
<TH>Name</TH>
<TH>Age</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>name1</TD>
<TD>age1</TD>
<TD>address1</TD>
</TR>
<TR>
<TD>name2</TD>
<TD></TD>
<TD>address2</TD>
</TR>
<TR>
<TD>name3</TD>
<TD>age3</TD>
<TD>address3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Displaying images in a table
<!DOCTYPE HTML>
<HEAD>
<TITLE>Displaying Images</TITLE>
<STYLE>
body {
padding:10px 50px;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
img{
height:100px;
width:100px;
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Table 1: Displaying images in the table </CAPTION>
<TR>
<TD>Desert</TD>
<TD><IMG src="Desert.jpg"></TD>
</TR>
<TR>
<TD>Jelly Fish</TD>
<TD><IMG src="Jellyfish.jpg"></TD>
</TR>
<TR>
<TD>Koala</TD>
<TD><IMG src="Koala.jpg"></TD>
</TR>
<TR>
<TD>Tulips</TD>
<TD><IMG src="Tulips.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Applying Rounded Corners on table cells
the border-radius property is used to apply rounded corners on various html elements,
such as img and td.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Applying Rounded Corners</TITLE>
<STYLE>
body {
padding:10px 50px;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
td {
border-radius:50px;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
img{
border-radius:50px;
height:100px;
width:100px;
}
table{
border:1px solid #000;
border-radius:50px;
background:gray
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Table 1: Displaying images in the table </CAPTION>
<TR>
<TD>Desert</TD>
<TD><IMG src="Desert.jpg"></TD>
</TR>
<TR>
<TD>Jelly Fish<T/D>
<TD><IMG src="Jellyfish.jpg"></TD>
</TR>
<TR>
<TD>Koala</TD>
<TD><IMG src="Koala.jpg"></TD>
</TR>
<TR>
<TD>Tulips</TD>
<TD><IMG src="Tulips.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
No comments:
Post a Comment