CSS TABLES

View previous topic View next topic Go down

CSS TABLES

Post by Admin on 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 Smile


Last edited by Admin on Mon Oct 16, 2017 7:23 pm; edited 1 time in total

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by jalilahb on 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 Smile
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 Smile


Last edited by jalilahb on Sun Oct 15, 2017 5:54 am; edited 1 time in total

jalilahb
Master
Master

Posts : 7
Join date : 2017-10-15

View user profile

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 Smile
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 Smile

Welcome jalilahb Smile
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 Smile

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by jalilahb on 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
Master

Posts : 7
Join date : 2017-10-15

View user profile

Back to top Go down

Re: CSS TABLES

Post by jalilahb on Sun Oct 15, 2017 5:56 am

Hello Again Ma'am Junaimah can you give also a sample code for the striped Table ? Smile

jalilahb
Master
Master

Posts : 7
Join date : 2017-10-15

View user profile

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 Smile

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 ? Smile

Hi jalilahb Smile this is the sample code for the striped table:

Example
tr:nth-child(even) {background-color: #f2f2f2}

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by JuliaB on 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. Smile ikr haha

JuliaB
Veteran
Veteran

Posts : 4
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by janella on 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
Member

Posts : 3
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by Lolita01 on 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
Master

Posts : 7
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by Lolita01 on 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 Smile I want to try this one !

Lolita01
Master
Master

Posts : 7
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by Lolita01 on 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 Smile
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 Smile

Welcome jalilahb Smile
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 Smile

Thank you for the sample code ma'am junaimah :*

Lolita01
Master
Master

Posts : 7
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by Rtagudin on Mon Oct 16, 2017 8:31 pm

Is there a standard measure of table border?

Rtagudin
Member
Member

Posts : 3
Join date : 2017-10-16

View user profile

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 Smile

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 Smile don't hesitate to ask question if you have some in your mind

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by Admin on 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 Smile Can somebody show an example of their code in setting the width and height of their table hehe

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by KathrynB on Wed Oct 18, 2017 1:45 pm

Except in CSS Table what are the other CSS Properties? Question

KathrynB
Master
Master

Posts : 5
Join date : 2017-10-18

View user profile

Back to top Go down

Re: CSS TABLES

Post by KathrynB on 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
Master

Posts : 5
Join date : 2017-10-18

View user profile

Back to top Go down

Re: CSS TABLES

Post by KathrynB on 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. Very Happy

KathrynB
Master
Master

Posts : 5
Join date : 2017-10-18

View user profile

Back to top Go down

Re: CSS TABLES

Post by Admin on 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. Very Happy

You're correct KathrynB Very Good Smile

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by Admin on Wed Oct 18, 2017 2:01 pm

KathrynB wrote:Except in CSS Table what are the other CSS Properties? Question

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 Smile

Admin
Admin
Admin

Posts : 26
Join date : 2017-09-15

View user profile http://junaimah.forumotion.asia

Back to top Go down

Re: CSS TABLES

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum