CSS TABLES
+3
JuliaB
jalilahb
Admin
7 posters
Hello Programmers :: CSS :: CSS TABLES
Page 1 of 1
CSS TABLES
by Admin Fri Sep 15, 2017 12:45 pm
The look of an HTML table can be greatly improved with CSS:
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.
The border-collapse property sets whether the table borders should be collapsed into a single border:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:
Example
table {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td> .
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td> .
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <th> elements:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
Example
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
Add the border-bottom property to and for horizontal dividers:
Example
th, td {
tr:hover {background-color: #f5f5f5}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2}
Table Color
The example below specifies the background color and text color of <th> elements:
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:
Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:
Have you tried inserting CSS tables in your webpage or program?
For any clarifications feel free to leave your comment below
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.
The border-collapse property sets whether the table borders should be collapsed into a single border:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:
Example
table {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td> .
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td> .
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <th> elements:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
Example
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
Add the border-bottom property to and for horizontal dividers:
Example
th, td {
tr:hover {background-color: #f5f5f5}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2}
Table Color
The example below specifies the background color and text color of <th> elements:
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:
Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:
Have you tried inserting CSS tables in your webpage or program?
For any clarifications feel free to leave your comment below
Last edited by Admin on Mon Oct 16, 2017 7:23 pm; edited 1 time in total
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by jalilahb Sun Oct 15, 2017 5:15 am
Thank you Ma'am for this information about CSS Table, I tried the hoverable table and it worked Ma'am
but ma'am can you give the example code for the Responsive table? I would like to try it also but I don't know how it should like in codes hehehe thankyou in advance Ma'am
but ma'am can you give the example code for the Responsive table? I would like to try it also but I don't know how it should like in codes hehehe thankyou in advance Ma'am
Last edited by jalilahb on Sun Oct 15, 2017 5:54 am; edited 1 time in total
jalilahb- Master
- Posts : 7
Join date : 2017-10-15
Re: CSS TABLES
by Admin Sun Oct 15, 2017 5:30 am
jalilahb wrote:Thank you Ma'am for this information about CSS Tables, I tried the hoverable table and it works Ma'am
but ma'am can you give the example code for the Responsive table? I would like to try it also but I don't know how it should like in codes hehehe thankyou in advance Ma'am
Welcome jalilahb
This is the sample code for the Responsive Table.
Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
You can try it now
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by jalilahb Sun Oct 15, 2017 5:49 am
I tried already ma'am, and now i know what's the use of responsive table; this is if your screen is to small to display your table.
jalilahb- Master
- Posts : 7
Join date : 2017-10-15
Re: CSS TABLES
by jalilahb Sun Oct 15, 2017 5:56 am
Hello Again Ma'am Junaimah can you give also a sample code for the striped Table ?
jalilahb- Master
- Posts : 7
Join date : 2017-10-15
Re: CSS TABLES
by Admin Sun Oct 15, 2017 6:00 am
jalilahb wrote:I tried already ma'am, and now i know what's the use of responsive table; this is if your screen is to small to display your table.
That's correct jalilahb very good
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by Admin Sun Oct 15, 2017 6:03 am
jalilahb wrote:Hello Again Ma'am Junaimah can you give also a sample code for the striped Table ?
Hi jalilahb
this is the sample code for the striped table:Example
tr:nth-child(even) {background-color: #f2f2f2}
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by JuliaB Mon Oct 16, 2017 7:26 pm
Yes, i have tried inserting a CSS Table in my database, and it's quite easy to understand. It's not that confusing at all. Tables helps a program more organize. ikr haha
ikr haha
JuliaB- Veteran
- Posts : 4
Join date : 2017-10-16
Re: CSS TABLES
by janella Mon Oct 16, 2017 7:30 pm
hi maam junaimah.. i can use tablelist to list a name .. thank you for the info
janella- Member
- Posts : 3
Join date : 2017-10-16
Re: CSS TABLES
by Lolita01 Mon Oct 16, 2017 8:02 pm
Yes ma'am, I tried already inserting table in my webpage but not the different kinds of CSS tables like the hoverable and responsive
Lolita01- Master
- Posts : 7
Join date : 2017-10-16
Re: CSS TABLES
by Lolita01 Mon Oct 16, 2017 8:04 pm
jalilahb wrote:I tried already ma'am, and now i know what's the use of responsive table; this is if your screen is to small to display your table.
aaah now I know
I want to try this one !
Lolita01- Master
- Posts : 7
Join date : 2017-10-16
Re: CSS TABLES
by Lolita01 Mon Oct 16, 2017 8:05 pm
Admin wrote:jalilahb wrote:Thank you Ma'am for this information about CSS Tables, I tried the hoverable table and it works Ma'am
but ma'am can you give the example code for the Responsive table? I would like to try it also but I don't know how it should like in codes hehehe thankyou in advance Ma'am
Welcome jalilahb
This is the sample code for the Responsive Table.
Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
You can try it now
Thank you for the sample code ma'am junaimah :*
Lolita01- Master
- Posts : 7
Join date : 2017-10-16
Rtagudin- Member
- Posts : 3
Join date : 2017-10-16
Re: CSS TABLES
by Admin Mon Oct 16, 2017 8:32 pm
Lolita01 wrote:Yes ma'am, I tried already inserting table in my webpage but not the different kinds of CSS tables like the hoverable and responsive
Try it now lolita I promise that you'll like it, this will make your table on your web page more beautiful
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by Admin Mon Oct 16, 2017 8:34 pm
janella wrote:hi maam junaimah.. i can use tablelist to list a name .. thank you for the info
Always welcome janella
don't hesitate to ask question if you have some in your mind
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by Admin Mon Oct 16, 2017 8:43 pm
Rtagudin wrote:Is there a standard measure of table border?
None, RTagudin you can set the width and height of your table also the margin
Can somebody show an example of their code in setting the width and height of their table hehe
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by KathrynB Wed Oct 18, 2017 1:45 pm
Except in CSS Table what are the other CSS Properties? 
KathrynB- Master
- Posts : 5
Join date : 2017-10-18
Re: CSS TABLES
by KathrynB Wed Oct 18, 2017 1:49 pm
janella wrote:hi maam junaimah.. i can use tablelist to list a name .. thank you for the info
I also want to make a table list. Can I choose or can I decide what color of my table it is?
KathrynB- Master
- Posts : 5
Join date : 2017-10-18
Re: CSS TABLES
by KathrynB Wed Oct 18, 2017 1:52 pm
Rtagudin wrote:Is there a standard measure of table border?
I guess, there's no standard measure of table border. You can set the width and height of the border in any size that you want.
KathrynB- Master
- Posts : 5
Join date : 2017-10-18
Re: CSS TABLES
by Admin Wed Oct 18, 2017 1:56 pm
KathrynB wrote:Rtagudin wrote:Is there a standard measure of table border?
I guess, there's no standard measure of table border. You can set the width and height of the border in any size that you want.
You're correct KathrynB Very Good
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Re: CSS TABLES
by Admin Wed Oct 18, 2017 2:01 pm
KathrynB wrote:Except in CSS Table what are the other CSS Properties?
There are lots of CSS PROPERTIES such as CSS LISTS, CSS DISPLAY, CSS BOX MODEL, and many more you can visit w3schools.com for more info aabout CSS properties
Admin- Admin
- Posts : 26
Join date : 2017-09-15 -
Hello Programmers :: CSS :: CSS TABLES
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum